HTML5 视频，海报图片在 IE 中不显示

Question

我有一个小问题 - 我的网站上有一个 HTML5 视频，它在 FF、Chrome、Safari 中运行良好。但是，如果我设置 autoplay="autoplay"，它只会在 IE 中显示视频。不知何故，它没有显示海报 img - 你可以在这里看到它，http://test.jsworldmedia.com/ 只需按查看视频。有谁知道怎么回事？

代码是：

<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>

Answer 1

如果加载了某些视频，IE9 会覆盖海报图像，这是默认设置。如果您添加属性preload="none"，则海报图像将在IE9中工作。

不理想。

编辑 我已经written about this 并且还向 W3C 提交了bug report，因为我认为它需要更改。

Answer 2

我发现poster 属性太不一致了。对我来说，preload="none" 只修复了 IE 9 问题。

您最好编辑视频，使海报图片成为视频的第一帧。

我是这个Video for Everybody 网站的忠实粉丝，它准确地概述了应该如何使用回退实现html5 <video> 标记。作者特别谈到了poster 属性，提到了不一致的支持和iOS 3.x 中的一个主要错误，作为将海报图像编码到视频第一帧的原因。

您还可以查看VideoJs，它将处理许多跨浏览器问题。

编辑 (2012-11-04)： VideoJs 可能不是一个好的选择，IE 9 报告的主要问题。

Answer 3

我有同样的问题。我做了以下操作，让海报在 IE8 和 IE9 中工作。

在 html 文件中，在视频元素下方添加一张图片，海报为 src：

<img id="video-poster" width="460px" height="260px" src="img/video_poster.jpg">

在css文件中添加：

#video-poster {position: absolute; z-index: 600; display: none;}`

注意在css中父需要有position: relative

在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));