我正在嘗試創建一封電子郵件,其中包含嵌入的視頻,以及備用影像,以防客戶端不支持 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 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>
uj5u.com熱心網友回復:
根據您從中獲取代碼的文章,您缺少以下應該作為后備的部分:
<!-- 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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/414733.html
標籤:
下一篇:如果值為0發送電子郵件C#WPF
