如何在网页中插入FLV视频，经测试兼容IE、火狐、谷歌等浏览器 -

崔志军

浏览: 28326 次
性别:
来自: 北京

最近访客更多访客>>

mumume123

msj_0529

dkl187788

cfightui

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

如何在网页中插入FLV视频，经测试兼容IE、火狐、谷歌等浏览器

博客分类：

html

浏览器 ie flash firefox chrome

之前有个项目需要在后台上传视频，然后在网站前台中播放出来，因为之前插入的视频都是来自优酷、土豆等视频网站，那个方法几乎所有的在线编辑器都自带了，直接复制粘贴地址就搞定了。所以对视频这一块没什么研究，但是实际需求则不是这么简单，你的客户如此说：就是不想把视频传到优酷上！这个时候我们就只能重新写个模块吧。

思路很简单，后台写个上传视频的功能模块。然后在需要播放视频的页面中，调用视频的路径即可。后台上传视频，我们今天先不谈。先保证视频能够在所有的浏览器中播放吧。

找了好多资料，网上一个一个的，你抄我，我抄你，复制来复制去，没几个做过测试的，大部分都不能用，笔者走了两天的弯路，总算得到一个好的解决方案了。现在把它分享了。也加上测试说明，方便后来人。

首先给出思路。网页中可以播放视频，必然要借助某个播放器，这个播放器可以是系统自带的，也可以是浏览器的ActiveX控件。对于使用系统自带的播放器，可以使用quicktime插件，这个比较麻烦，本地需要安装一个quicktime客户端，这个方法虽然可行，但是用户体验不好。用户如果不想安装客户端，一切玩完！

所以，我们不妨使用FLASH方案，比较目前，所有的浏览器都支持FLASH。所以，这个方法大众普遍都很接受，优酷、土豆等在线视频就是使用的FLASH的。

本例播放器使用Flvplayer.swf。播放器在下文的demo文件中。网页中插入代码的如下：

XML/HTML Code复制内容到剪贴板
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="305" height="205">
    <param name="movie" value="Flvplayer.swf" />
    <param name="quality" value="high" />
    <param name="allowFullScreen" value="true" />
    <param name="FlashVars" value="vcastr_file=movies/11.flv&LogoText=test&BufferTime=3" />
    <embed src="Flvplayer.swf" allowfullscreen="true" flashvars="vcastr_file=movies/11.flv&LogoText=test" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="505" height="405"></embed>
</object>
以上代码放在<body></body>中即可。

可以看出这是使用swflash.cab一种ActiveX控件实现的播放效果，其实就是这个：Adobe Shockwave Player 12.0.2.122

vcastr_file=movies/11.flv是你的视频路径。<param name="movie" value="Flvplayer.swf" /> 这个value的值表示播放器名称，注意路径的设置。

以上代码，笔者亲自测试，在IE6、IE7、IE8、IE9、IE10、Firefox、Chrome几大浏览器都能正常播放，兼容性近乎完美。

网页中插入FLV视频

但是，这个播放器只能播放FLV格式的视频，其他格式不支持，如果上传的是其他格式的，那么就请写服务器端转码程序转码吧。

附件下载：网页中插入FLV视频DEMO
链接地址：http://www.91ctc.com/article/article-309.html

分享到：