为什么我的海报图片在IE9的HTML5视频中无法显示？

Question

我在这个页面上有一个HTML5视频：

http://www.yellowtulipcomms.com/portfolio/global-public-speaking/

它位于右侧3张图片的底部。

我正在使用以下代码：

<video class="video-js" width="235" height="185" playbackRate="1" poster="http://www.yellowtulipcomms.com/wp-content/uploads/2011/11/Kimia-Namadchi-STILL.jpg" controls="controls">

在IE9中，视频下方的海报图像不会显示出来。有什么想法吗？

- David

Answer 1

1. 删除playbackRate属性。
2. 添加preload="none"属性。

- alexander farkas

---

虽然 preload="none" 可以发挥作用，但它会增加用户等待视频开始的时间（具体时间取决于视频长度，有时会增加5-10秒）。 - doubleJ

Answer 2

仅将图像作为背景使用preload ="none"标记才能正常工作，但是这个功能有什么用处呢？没有。为什么Opera、Firefox、Chrome等浏览器可以解释它，而IE却不能？

为什么每个网页中都有一个IF IE标签？为什么我必须把每件事都做得糟糕才能在IE上工作？

这就是微软开发的完整解决方案。

制作一张与视频相同分辨率的图片，并将其绝对定位在视频标记之外并赋予id，例如“video_play” 现在制作一个函数来淡出图片并播放视频。

现在，您可以使用预加载功能，它看起来很棒，并且在IE上运行时不会出现黑屏幕。

$("#video_play").click(function(){

    $(this).fadeOut(600);
    var video = document.getElementById("video_src");
    if (video.paused) {
       video.play();
    } else {
       video.pause();
    }

}); 

也许您可以设置海报标签并使用JavaScript获取属性，使我的脚本完全动态化。时间很糟糕，就像IE一样...

- Nate

Answer 3

我有一个页面加载了几个视频，在IE9中，封面图像有时会出现，有时不会出现。解决方法是将封面图像设置为视频元素的背景。这样运行得很好。

- Graham White

---

我已经尝试过了，使用1x1像素透明gif海报和不使用海报，但是背景会在IE11中闪现一下然后消失。这是使用preload="none"、"metadata"和"auto"的情况。 - plugincontainer