圣侠无双网游活动专题站

前言

之前一直主要做微信小程序方面的内容，视频播放这块一直没怎么在意视频格式的问题，最近开发了一个律所的官网项目，涉及到大量flv格式的视频，让用户转成mp4工作量太大，所以就找了找，如何在html中播放.flv格式的视频。

正文

目前主流浏览器不能直接嵌入并且播放FLV文件，所以直接用video标签播放是行不通的，网上查了一下，发现有两种常用方法：

借助一个html标签object,来嵌入一个swf媒体播放文件，并利用该文件来播放你预设的文件。利用B站开源的flv.js 通过将FLV文件流转换为ISO BMFF（Fragmented MP4）段，然后

第一种方法

首先来说一下第一种方法，需要借助一个swf媒体播放文件，网上文章中大多数下载的媒体文件都不能正常工作（坑人啊），所以最后自己找了一个可用的上传到阿里云上，地址： swf播放器 .flv格式视频地址 下面代码中示例地址为 https://file.njshushuo.com/8d2164883f65d1f78180b3fcc159d282 。 实际开发时将其替换为自己的地址。附上代码：

classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"

width="640"

height="480"

id="VideoPlayer"

align="middle"

>

name="movie"

value="./flvplayer.swf?video=https://file.njshushuo.com/8d2164883f65d1f78180b3fcc159d282&autoplay=true"

/>

src="./flvplayer.swf"

flashvars="vcastr_file=https://file.njshushuo.com/8d2164883f65d1f78180b3fcc159d282"

quality="high"

bgcolor="#000000"

width="500"

height="380"

name="VideoPlayer"

align="middle"

allowScriptAccess="*"

allowfullscreen="true"

type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer"

/>

将html打开，果然.flv格式能够播放了，外观也挺不错。

放入vue项目中，却遇到了一个坑，那就是swf文件不能为相对路径，需要改成网络绝对路径，否则加载不到。 ok，大功告成！ 然而这种方法主要是利用flash插件完成的，需要浏览器安装flash插件，而对于普通用户而言：

安装flash困难如果禁用了flash，再次开启也存在一定的困难。

另外，flash播放还存在 稳定性 和cpu占用率高的缺点。同时，由于该项目支持移动端，而移动端并没有flash插件，所以只能放弃第一种方法

第二种方法

然后开始研究flv.js, 附上B站flv.js的github地址 https://github.com/Bilibili/flv.js

简介

flv.js是bilibili网站开源的使用纯JavaScript而不使用Flash编写的HTML5 Flash视频（FLV）播放器。通过将FLV文件流转换为ISO BMFF（Fragmented MP4）段，然后

优势

带有H.264 + AAC / MP3编解码器播放的FLV容器多部分分段视频播放HTTP FLV低延迟直播流播放FLV 通过 WebSocket 实时流播放兼容Chrome，FireFox，Safari 10，IE11和Edge极低的开销，以及浏览器加速的硬件！

附上代码

将其放在vue项目中， 通过 npm install flv.js引入 flv.js，创建一个mvideo组件，代码如下：

使用：

flv.js的缺点在于 需要知道该资源的文件类型，在createPlayer时，传入type

switch (mds.type) {

case 'flv':

return new FlvPlayer(mds, optionalConfig);

default:

return new NativePlayer(mds, optionalConfig);

}

文末

好了，两种方法都介绍完了，总体而言，第一种方法需要flash插件，稳定性和cpu占用率高，且不支持移动端。第二种方法则需要提前知道视频的格式，具体怎么选择就要根据自己的项目抉择了。