网页播放flv视频

一、概述

       之前做过带有流媒体服务的网站，可以对外提供视频服务。大致做法是利用windows meida server作为本地流媒体服务器，然后在IIS中添加相应的MIME类型，接下来就可以用respons.redirect()的方式重定向到需要播放的视频（视频文件存放在网站的video目录下）就可以直接播放了。但是这是有缺点的，主要表现在视频格式和浏览器的兼容性上面。视频格式种类有许多，有html5支持的mp4,webm,ogg，还有flv、rm、avi、wmv、mov、mkv等等。对于支持html5的浏览器，mp4，webm，ogg都可以直接播放(其实只有谷歌浏览器支持的比较好)。而flv，rm，avi等等都无法直接播放，需要下载相应的播放器组件。对于要求客户在PC上安装相应的播放器，这点是不现实的。这里需要说明的是，由于大部分用户都是windows操作系统，所以一般都会有wmp(windows media player)，所以按理是可以在网页上调用wmp播放它支持的视频，然而发现谷歌和火狐却无法播放，IE却可以。后来搜索发现，对于非IE核心的浏览器需要安装windows media player extention for html5才行。看来又不切实际。

        由于之前的项目属于内部使用，对于浏览器的兼容性就没那么高的要求，于是就成了必须使用支持mp4和webm格式的Google chrome浏览器。然后近日又需要提供网页播放视频的功能，而且要求比较好的浏览器兼容性，于是不得不再次研究这个问题。无奈仍然还是那个结论，对于特定的视频格式仍然需要相应的播放器组件。通过不懈的努力，发现对于flv格式的视频，还是有办法的----那就是在网页里嵌入一个flash播放器来播放flv视频。

二、主要内容

根据自己做的测试，视频格式与浏览器的兼容性如下所示：

	flv	mp4	rm	wmv	avi	mkv
Google chrome	可调用flash播放器播放	可以直接播放	无法直接播放	无法直接播放	无法直接播放	无法直接播放
fire fox	可调用flash播放器播放	提示文件损坏	无法直接播放	无法直接播放	无法直接播放	无法直接播放
IE 11	可调用flash播放器播放	可调用wmp播放	无法直接播放	可调用wmp播放	可调用wmp播放	无法直接播放

这里对于flv格式的视频如何在网页中播放进行说明：

1.下载一个已经制作好了的flash播放器，这里给出一个下载地址：http://xiazai.jb51.net/201004/other/vcastr22.rar

   下载成功后将vcastr22.swf放入你的网站bin目录（其它目录也可）

2.在html中加入object标签（object标签是html5的标签）

<div align="center">
<object id="obj_flv" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="240" height="180">
<param name="movie" value="http://localhost/bin/vcastr22.swf?vcastr_file=http://localhost/video/1.flv"/>
<param name="quality" value="high">
<param name="allowFullScreen" value="true" />
<embed src="http://localhost/bin/vcastr22.swf?vcastr_file=http://localhost/video/1.flv" allowFullScreen="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="240" height="180"></embed>
</object>
</div>

将上面代码红色部分用你的vcastr22.swf地址和flv视频地址替换。

3.运行网站就可以发现能够播放flv视频了。

4.如何替换视频？

   替换视频目前可以通过修改该object的参数来实现，具体方法如下：

<script type="text/javascript">
function changeflv(path)
{
var swf_width=240
var swf_height=240
var texts='test_example'
var files=path;
document.getElementById("obj_flv").innerHTML='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">'+'<param name="movie" value="http://localhost/video/vcastr22.swf"><param name="quality" value="high">'+'<param name="menu" value="false"><param name="allowFullScreen" value="true" />'+'<param name="FlashVars" value="vcastr_file='+files+'&vcastr_title='+texts+'">'+'<embed src="http://localhost/video/vcastr22.swf" allowFullScreen="true" FlashVars="vcastr_file='+files+'&vcastr_title='+texts+'" menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'+'</object>';
}
</script>

通过一个js函数来修改该object的innerHTML，来达到修改要播放的视频文件链接地址的目的。

至于网页播放flv的其它方式可以参考下面的博客：

http://www.cnblogs.com/goody9807/archive/2009/06/08/1498879.html

参考来源：

http://www.zhangxinxu.com/wordpress/2010/03/让所有浏览器支持html5-video视频标签/

http://www.jb51.net/article/14107.htm

http://www.jb51.net/article/22916.htm

http://www.seostudying.com/903.html

http://www.91ctc.com/article/article-309.html

---更正

2015.7.20

嵌入flsh不需要object元素，直接使用embed元素即可，最后的代码如下：

<div align="center">
<embed src="test.swf?vcastr_file=test.flv"  width="240" height="180"></embed>
</div>

需要注意的是src里"?"号后的参数名称必须是vcastr_file，然后填上视频文件的地址即可。