如果浏览器同时支持html5视频和闪回后备加载 [英] Both html5 video and flash fallback loading if browser supports both

问题描述

我在我的项目中使用闪回后退进行Html5视频播放（如果它不支持html5）。
但如果浏览器同时支持这两个玩家，则会加载两个玩家帮助我。

I'm doing Html5 video play on my project with flash fallback (if it doesn't support html5). But both players are loaded if browser supports both. help me.

<video controls="controls" preload="auto" poster="image.url" >
    <source src="video.url" type="video/ogg" />
    <source src="video.url" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
<object type="application/x-shockwave-flash" data="flowplayer-3.1.1.swf">
   <param name="movie" value="flowplayer-3.1.1.swf" />
   <param name="allowFullScreen" value="true" />
   <param name="wmode" value="transparent" />
   <param name="flashVars" value="config={'playlist':['image.url',
       {'url':'video.url','autoPlay':false}]}" />
   <img alt="Image" src="" width="191px" height="256px" 
       title="No video playback capabilities, please download the video below" />
</object>

推荐答案

只需放置<对象> 在< video> 标记内，使其成为带有源标记的兄弟。如果浏览器不支持< video> ，则会在内部呈现内容，类似于< noscript> 脚本关闭。

Just place the <object> inside the <video> tag, making it siblings with the source tags. If the browser does not support <video>, it renders the contents inside, similar to <noscript> if scripts were off.

<video controls="controls" preload="auto" poster="image.url" >

    <source src="video.url" type="video/ogg" />
    <source src="video.url" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>

    <object type="application/x-shockwave-flash" data="flowplayer-3.1.1.swf">
       <param name="movie" value="flowplayer-3.1.1.swf" />
       <param name="allowFullScreen" value="true" />
       <param name="wmode" value="transparent" />
       <param name="flashVars" value="config={'playlist':['image.url',{'url':'video.url','autoPlay':false}]}" />
       <img alt="Image" src="" width="191px" height="256px" title="No video playback capabilities, please download the video below" />
    </object>

</video>

这篇关于如果浏览器同时支持html5视频和闪回后备加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！