为电子邮件中的 HTML5 个视频创建后备图像

Question

我正在尝试创建一封电子邮件，其中包含嵌入式视频以及备用图片，以防客户端不支持 html5。

问题：
我运行遇到的问题是，虽然视频可以在兼容的客户端上运行，但 后备图像不会显示在与视频不兼容的浏览器上 。当涉及到这些东西时，我是一个新手，并且不太了解我正在使用的代码中的问题所在。

编辑：阐明了“不兼容”的含义。

<style type="text/css">

.video-wrapper {display:none;}

@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) 
{
    .video-wrapper { display:block!important; }
    .video-fallback { display:none!important; }
}

@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) 
{
    div[class^=video-wrapper] { display:block!important; }
    div[class^=video-fallback] { display:none!important; }
}

#MessageViewBody .video-wrapper { display:block!important; }
#MessageViewBody .video-fallback { display:none!important; }

</style>

<b>Video in Email Test</b><br>

<!-- video section -->
<div class="video-wrapper" style="display:none;">
<p> Video Content </p>
<video controls="controls" height="176" poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" srcset="https://www.w3schools.com/html/mov_bbb.mp4" width="320">

<!-- fallback 1 -->
<a href="https://www.emailonacid.com">
<img height="176" src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320">
</a>

</video>
</div>

Answer 1

基于 the article you took the code from，您遗漏了以下应该作为备用的部分：

<!-- fallback section -->
<div class="video-fallback">
  <p>Fallback Content</p>
  <a href="https://www.emailonacid.com" ><img height="176" 
    src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
</div>

为电子邮件中的 HTML5 个视频创建后备图像

Creating a fallback image for HTML5 video in email

email

fallback

html5-video