HTML5视频，海报img不显示 [英] HTML5 video, poster img doesnt show

问题描述

我有一个小问题 - 我有一个HTML5视频在我的网站，它工作正常在FF，Chrome，Safari。但是，如果我设置autoplay =自动播放，它只显示在IE的视频。不知何故它不显示海报img - 你可以在这里看到它， http://test.jsworldmedia.com/ 只需按看看视频。

代码是：

 < video id =videoContainerwidth =932height =524controls =controlsposter =/ media / 13037 / big_buck_bunny_poster.jpg> 
< source src =http://test.jsworldmedia.com/media/13010/big_buck_bunny.mp4type =video / mp4/> 
< source src =http://test.jsworldmedia.com/media/13555/big_buck_bunny.ogvtype =video / ogg/> 
< source src =http://test.jsworldmedia.com/media/13034/big_buck_bunny.webmtype =video / webm/> 
< object id =flash_fallback_1class =vjs-flash-fallbackwidth =932height =524type =application / x-shockwave-flashdata =http： .flowplayer.org / swf / flowplayer-3.2.1.swf> 
< param name =movievalue =http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf/> 
< param name =allowfullscreenvalue =true/> 
< param name =flashvarsvalue =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.jpgwidth =932height =542alt =title =没有视频播放功能。 。 /> 
< / object> 
< / video> 
  

解决方案

如果部分视频加载，这是默认值。如果添加属性 preload =none，海报图像将在IE9中使用。

不理想。 / p>

编辑
我有关于此，并已提交了 bug报告与W3C，因为我认为它需要更改。

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?

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>

解决方案

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.

Not ideal.

edit I've written about this and have also filed a bug report with the W3C as I think that it needs to be changed.

这篇关于HTML5视频，海报img不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！