Html HTML5 视频，海报 img 不显示在 IE 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8445965/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 video, poster img doesnt show in IE
提问by Ian Devlin
I've got a small problem - I have a HTML5 video om my site, it works fine in FF, Chrome, Safari. However, it only shows the video in IE if I set autoplay="autoplay". Somehow it doesn't show the poster img - You can see it here, http://test.jsworldmedia.com/Just press See Video. Anyone know what is wrong?
我有一个小问题 - 我的网站上有一个 HTML5 视频，它在 FF、Chrome、Safari 中运行良好。但是，如果我设置了 autoplay="autoplay"，它只会在 IE 中显示视频。不知何故，它没有显示海报 img - 你可以在这里看到它，http://test.jsworldmedia.com/只需按 See Video。有谁知道出了什么问题？
The code is:
代码是：
<video id="videoContainer" width="932" height="524" controls="controls" poster="/media/13037/big_buck_bunny_poster.jpg">
<source src="http://test.jsworldmedia.com/media/13010/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://test.jsworldmedia.com/media/13555/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://test.jsworldmedia.com/media/13034/big_buck_bunny.webm" type="video/webm" />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="932" height="524" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value="config={'playlist':['http://test.jsworldmedia.com/media/13037/big_buck_bunny_poster.jpg', {'url': 'http://test.jsworldmedia.com/media/13010/big_buck_bunny.mp4','autoPlay':false,'autoBuffering':true}]}" />
<img src="http://test.jsworldmedia.com/media/13037/big_buck_bunny_poster.jpg" width="932" height="542" alt="" title="No video playback capabilities." />
</object>
</video>
回答by Ian Devlin
IE9 overwrites the poster image if some of the video is loaded, which is the default. If you add the attribute preload="none"the poster image will work in IE9.
如果加载了某些视频，IE9 会覆盖海报图像，这是默认设置。如果添加属性preload="none"，海报图像将在 IE9 中工作。
Not ideal.
不理想。
editI've written about thisand have also filed a bug reportwith the W3C as I think that it needs to be changed.
回答by Justin
I have found the posterattribute to be too inconsistent. For me, preload="none"only fixed the IE 9 problem.
我发现该poster属性太不一致了。对我来说，preload="none"只修复了 IE 9 问题。
You are better off editing your video so that the poster image is the first frame of your video.
您最好编辑视频，使海报图像成为视频的第一帧。
I am a big fan of this Video for Everybodysite which outlines exactly how one should implement the html5 <video>tag with fallbacks. The author talks specifically about the posterattribute, mentioning inconsistent support and a major bug in iOS 3.x as reasons to encode the poster image into the first frame of your video.
我是这个Video for Everyone网站的忠实粉丝，它准确地概述了应该如何<video>使用回退实现 html5标签。作者专门谈到了该poster属性，提到了不一致的支持和 iOS 3.x 中的一个主要错误，这是将海报图像编码到视频第一帧的原因。
You can also check out VideoJswhich will handle many of the cross browser issues.
您还可以查看VideoJs，它将处理许多跨浏览器问题。
EDIT (2012-11-04):VideoJs may not be a good option, major issues reported with IE 9.
编辑（2012-11-04）：VideoJs 可能不是一个好的选择，IE 9 报告的主要问题。
回答by Amadu Bah
I had the same issue. I did the following to have the poster working in IE8 and IE9.
我遇到过同样的问题。我做了以下工作让海报在 IE8 和 IE9 中工作。
In html file add an image bellow the video element with the poster as src:
在 html 文件中，在视频元素下方添加一张图片，海报为 src：
<img id="video-poster" width="460px" height="260px" src="img/video_poster.jpg">
In css file add:
在css文件中添加：
#video-poster {position: absolute; z-index: 600; display: none;}`
Note that the parent need to have in css position: relative
请注意，父级需要在 css 中 position: relative
In JS file add:
在JS文件中添加：
/**
* fix the following issue: "video preview not showing properly on IE8 and IE9"
*/
(function ($) {
var browserIEInfo = navigator.userAgent.match(/MSIE (([0-9]+)(\.[0-9]+)?)/);
if (browserIEInfo === null || parseInt(browserIEInfo[2]) > 9){
return;
}
if (parseInt(browserIEInfo[2]) < 9 && !isFlashSupported()) {
return;
}
var video = $('video'); // use element id if there is more than 1 video
var videoPoster = $('#video-poster');
$( window ).resize(function() {
fixVideoCoverPosition();
});
fixVideoCoverPosition();
videoPoster.show();
videoPoster.click(function() {
video.get(0).play()
});
video.on('playing', function() {
videoPoster.hide();
});
video.on('ended', function() {
videoPoster.show();
});
function isFlashSupported() {
var hasFlash = false;
try {
new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
} catch (e) {
var mimeTypes = navigator.mimeTypes;
if (mimeTypes
&& mimeTypes['application/x-shockwave-flash'] !== undefined
&& mimeTypes['application/x-shockwave-flash']['enabledPlugin']
) {
hasFlash = true;
}
}
return hasFlash;
}
function fixVideoCoverPosition() {
var videoPosition = video.position();
video.width();
$('#video-poster').css({
top: videoPosition.top,
left: videoPosition.left,
width: video.width(),
height: video.height()
});
}
}(jQuery));
