为什么我的海报图片在 IE9 html5 视频中不显示答案

【问题标题】：Why doesn't my poster image show in IE9 html5 Video为什么我的海报图片在 IE9 html5 视频中不显示
【发布时间】：2015-08-31 17:05:19
【问题描述】：

我在这个页面上有一个 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 中显示

有什么想法吗？

【问题讨论】：

标签： internet-explorer html internet-explorer-9 html5-video

【解决方案1】：

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

【讨论】：

虽然preload="none" 确实有效，但它会增加用户等待视频开始的时间（有时会增加 5-10 秒，具体取决于视频的长度）。跨度>

【解决方案2】：

图像作为背景仅适用于 preload="none" 标签，但是否有此功能？不求回报。为什么 Opera、Firefox、Crome... 能解释这个而 IE 不能？

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

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

制作与视频具有相同分辨率的图片，并将绝对位置放在视频标签之外，并提供类似“video_play”的 id 现在制作了一个让图片淡出并播放视频的函数。

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

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

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

});

您可以设置海报标签并使用javascript获取属性并使我的脚本充满活力。 To time 很糟糕...就像IE....

【讨论】：

【解决方案3】：

我有一个页面加载了几个视频，在 IE9 中有时会出现海报图像，有时不会。解决方案是将海报图像设置为视频元素的背景。工作正常。

【讨论】：

我试过了，有和没有 1x1px 透明 gif 海报，背景会出现闪烁然后消失（在 IE11 中）。即使用 preload="none"、"metadata" 和 "auto"