| flvjs, 视频

【flvjs】使用flvjs实现h5控件播放视频、直播流

flvjs源码地址：https://github.com/bilibili/flv.js

下载下来后，使用进入项目根目录运行

npm install          # install dev-dependences
npm install -g gulp  # install build tool
gulp release         # packaged & minimized js will be emitted in dist folder

如果遇到flvjs本身的问题需要修改源码，可以去issues里找解决方案，比如我遇到的一个，# 播放器在destroy后仍然会下载数据，这个时候就需要修改源码然后运行上面的命令（运行过程中可能会遇到报错，是由于本机的nodejs版本太高，重装旧版本覆盖后即可）。
运行完成在根目录会有一个dist文件夹，里面有flv.js、flv.min.js，可以直接丢到项目下使用。

简单的使用方式，就是先在页面中添加一个video标签，

<video id="video1"  style="object-fit: fill;" muted></video>

muted表示静音，且会自动播放。
object-fit：fill可以让视频自动填充容器（有浏览器版本限制，部分浏览器不识别）。

然后新建一个方法

function videoInit(id, src){
    var self=this;
    self.src=src;
    self.id=id;
    // 设置属性 type播放类型 url播放链接 isLive是否为直播流 hasAudio是否播放声音 hasVideo是否播放视频 enableStashBuffer开启播放器端缓存
    // enableWorker浏览器端开启flvjs的worker，多进程运行flvjs
    self.flvPlayer = flvjs.createPlayer({type: 'flv',url:src,isLive: true,hasAudio: false,hasVideo: true,enableWorker: true, enableStashBuffer: false},{});
    self.flvPlayer.attachMediaElement(document.getElementById(id));
    self.flvPlayer.load();
    self.flvPlayer.play();
    return self.flvPlayer;
}

只需要调用该方法，传入id（video控件的id）以及src（播放链接，可以是一个具体的视频链接，也可以是对后台的长连接请求地址，后台实时写流给前台播放）。
然后调用时赋值给一个变量
flvjs的api文档：https://github.com/bilibili/flv.js/blob/master/docs/api.md

var player = videoInit("video1","xxx");

想要销毁该播放器，就调用该播放器实例的unload、destroy方法。

if(null != player){
    player.unload();
    player.destroy();
    player = null;
}

注意事项

当一个页面需要播放多个视频时，如果这些视频全部来自同一域名地址，保持长连接时需要注意总请求数不能超过6个。因为大部分浏览器限制对同一域名的请求同时只能保持6个，具体可见：

https://blog.csdn.net/erhei0317/article/details/52614679

火狐浏览器可以自定义该值：

  1. 地址栏输入about:config
  2. 搜索max-persistent-connections-per-server
  3. 显示6，表示每个服务器域名最多保持的长连接数为6，可以自定义修改
    万能的chrome居然硬编码了该值

当请求数超过6个时，后面所有的请求都会被阻塞，等待前面的请求响应结束后才会被服务器接收。

控件样式调整
被公司要求调样式，对我来说比较头疼233，记录下

需要4个分屏，每个边框为2px，2×2的形式摆放，此外还有选中时的样式（边框颜色）
样式设置如下

.videoPlay4{width:calc(50% - 4px);height:calc(50% - 4px);float:left; border: 2px solid transparent;}
.videoSelect{border: 2px solid #ffde5c;}

部分浏览器不支持flvjs，可以使用
flvjs.isSupported()
判断

return 0；

ESC