在vue和html中播放.flv格式的视频

借助一个html标签object,来嵌入一个swf媒体播放文件，并利用该文件来播放你预设的文件。下载链接

利用B站开源的flv.js 通过将FLV文件流转换为ISO BMFF（Fragmented MP4）段，然后

一

需要借助一个swf媒体播放文件

.flv格式视频地址 下面代码中示例地址为 https://file.njshushuo.com/8d2164883f65d1f78180b3fcc159d282 。 实际开发时将其替换为自己的地址

参数名称	参数说明	默认值
vcastr_file	方法2传递影片flv文件地址参数，多个使用|分开	空
vcastr_title	影片标题参数，多个使用|分开，与方法2配合使用	空
vcastr_xml	方法3 传递影片flv文件地址参数，样板参考 http://www.ruochi.com/product/vcastr2/vcastr.xml	vcastr.xml
IsAutoPlay	影片自动播放参数：0表示不自动播放，1表示自动播放	0
IsContinue	影片连续播放参数：0表示不连续播放，1表示连续循环播	0
IsRandom	影片随机播放参数：0表示不随机播放，1表示随机播放	0
DefaultVolume	默认音量参数 ：0-100 的数值，设置影片开始默认音量大小	100
BarPosition	控制栏位置参数 ：0表示在上浮动显示，1表示在影片下方显示	0
IsShowBar	控制栏显示参数 ：0表示不显示；1表示一直显示；2表示鼠标悬停时显示；3表示开始不显示，鼠标悬停后显示	2
BarColor	播放控制栏颜色，颜色都以0x开始16进制数字表示	0x000033
BarTransparent	播放控制栏透明度	60
GlowColor	图标颜色，颜色都以0x开始16进制数字表示	0x66ff00
IconColor	悬停时光晕颜色，颜色都以0x开始16进制数字表示	0xFFFFFF
TextColor	文字颜色，颜色都以0x开始16进制数字表示	0xFFFFFF
LogoText	可以添加自己等信息(英文)	空
LogoUrl	可以从外部读取图片,注意自己调整logo大小,支持图片格式和swf格式	空
EndSwf	影片播放结束后,从外部读取swf文件，可以添加相关影片信息，影片分享等信息，需自己制作	空
BeginSwf	影片开始播放之前,从外部读取swf文件，可以添加广告，或者网站信息，需自己制作	空
IsShowTime	是否显示时间 : 0表示不显示时间，1表示显示时间	1
BufferTime	缓冲时间，单位（秒）	2

 

放入vue项目中，却遇到了一个坑，那就是swf文件不能为相对路径，需要改成网络绝对路径，否则加载不到。
然而这种方法主要是利用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）段，然后通过Media Source Extensions API 将mp4段提供给HTML5 元素。
flv.js用ECMAScript 6编写，由Babel Compiler编译成ECMAScript 5 ，并与Browserify捆绑在一起。

优势

带有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);
}