播放带有 HTML5 后备的 FLV 视频

Posted

技术标签:

【中文标题】播放带有 HTML5 后备的 FLV 视频【英文标题】:Playing an FLV video with a fallback on HTML5 【发布时间】:2011-04-22 22:25:34 【问题描述】:

我告诉我的老板在 FLASH 上使用 html5。

但他说他希望 FLASH 作为第一个选项,如果浏览器(ipad 或任何其他)无法识别 FLASH ,它应该播放我们得到的 MP4 文件。

我建议在 Flash 上使用 HTML5。但他想要的恰恰相反。

我怎样才能做到这一点?你们有示例代码吗?

解决方案 使用 SWFObject(google it)和一个 SWF 控制器(如 FlashMediaPlayback.swf)。 了解 iPad 对视频大小有限制是非常重要的。 所以 MP4 文件不能大于 720p 和 160kbps 的音频。

我将在下面发布我的代码。你可以把它变成你自己的,并以你自己的方式使用它。

<div style="text-align:center" >
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    var flashvars = ;
    flashvars.src = "demo.flv";
    flashvars.controlBarMode = "floating";
    flashvars.autostart="true";
    var params = ;
    params.allowfullscreen = "true";
    params.allowscriptaccess = "always";
    params.bgcolor = "#1a1a1a";
    params.scale = "showall";
    var attributes = ;
    swfobject.embedSWF("demo_controller.swf", "videoDiv", "920", "560", "10.1.0", "expressInstall.swf", flashvars, params, attributes);
</script>

<div id="videoDiv" style="text-align:center">
<video controls="controls"  >
<source src="demo.mp4" type="video/mp4"/>
<source src="demo.ogv" type="video/ogg"/>
</video>
</div>
</div>

【问题讨论】:

【参考方案1】:

如果您使用SWFObject,我想您可以在 div 中放置一个视频标签,如果安装了 Flash,SWFObject 将替换为 Flash。

【讨论】:

【参考方案2】:

视频播放器创建者称其为“后退”,这可能有助于您的搜索。

我建议您查看一些现有的解决方案,这些解决方案通常将 Flash 播放器封装在类似 HTML5 的 API 中以获得更好的兼容性。 Kaltura HTML5 测试版在http://www.kaltura.org/advanced-examples 有一个后退示例。

【讨论】:

优秀的评论,不知道正确的术语。会发现更多。谢谢。 它可以在.NET 平台上运行吗?刚刚注意到这是一项付费服务​​? 我对 Kaltura 服务了解不多(虽然我相信有免费播放器),只是他们是这种技术的支持者。您还应该能够将他们的方法作为模型在您自己的系统中轻松使用,代码本身是开源的。 当我使用 SWFOject 嵌入 swf 视频时,前移如何工作?

以上是关于播放带有 HTML5 后备的 FLV 视频的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 视频后备 - 无法在本地 Flash 播放器中播放视频文件

使用flv.js实现html5播放flv格式视频文件

B 站 HTML5 播放器内核 Flv.js

html5 音频播放器 flash 后备

通过Vue+flvjs在HTML5中播放flv格式视频文件—demo及api

通过Vue+flvjs在HTML5中播放flv格式视频文件—demo及api