HTML5的RTMP闪回后备

时间:2012-07-11 11:01:54

标签: flash html5 video html5-video modernizr

如果浏览器不支持,我试图为html5视频设置闪回。 我可以在chrome上获得它,但chrome显示“没有支持格式的视频”。

我正在创建一个swf对象并使用Modernizr测试附加视频。 我有mp4和webm格式的视频。因为firefox需要一个ogv格式,它应该渲染闪回后备,但它没有这样做。

<div id="flash" width="230px" height="230px" style="display:inline-block">
  <video width="230px" height="230px" id="player2" controls="controls">
    <source src="'+path_webm+'" type="video/webm">
    <source src="'+path_mp4+'" type="video/mp4">
    <track kind="subtitles" src="../media/mediaelement.srt" srclang="en" />
      <p>Your browser leaves much to be desired.</p>
  </video>
</div>

var $vobj = $(mediaVideo);
$vobj.appendTo("#tab1");
if(!Modernizr.video.ogg) {
   so.write("flash");
}
});

这里是一个swf对象。

提前致谢!

3 个答案:

答案 0 :(得分:3)

这是一个简单的代码,允许HTML 5视频回退到闪存

<video id="movie" width="320" height="240" preload controls>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <source src="pr6.mp4" />
  <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf"> 
    <param name="movie" value="flowplayer-3.2.1.swf" /> 
    <param name="allowfullscreen" value="true" /> 
    <param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}}' /> 
  </object>
</video>

只需在所有源代码的末尾添加flash视频嵌入代码。

答案 1 :(得分:0)

请自己下次格式化代码!

你可以使用html5后备版。几天前我刚回答了一个类似的问题。点击此处:HTML5 Video tag with fallback

答案 2 :(得分:0)

该公司在The Chromium Blog的一篇文章中表示,它正在取消对HTML5 H.264视频编解码器的支持,转而支持WebM(VP8)和Theora视频编解码器。

了解详情:http://www.itproportal.com/2011/01/12/google-chrome-drops-h264-video-codec-support/#ixzz217vGB8dP