flvjs在vue中的使用:
HTML:
<video class="video-content" id="video">
您的浏览器不支持 HTML5 video!
</video>
import flvjs from "flv.js";
js:
//加载播放
let flvUrl = 'url'
let flvPlayer=null//flv实例
let videoPlayer = document.getElementById('video'); //获取html
if (flvjs.isSupported()) {
flvPlayer = flvjs.createPlayer({
type: 'flv',
url: flvUrl
})
flvPlayer.attachMediaElement(videoPlayer )
flvPlayer.load()
flvPlayer.play()
}
// 多路同时播放可能处理不过来,这里要主动追帧
setInterval(()=> {
if (flvPlayer.buffered.length > 0) {
const diff = flvPlayer.buffered.end(0) - flvPlayer.currentTime
console.log(diff)
if (diff > 0.5) {
flvPlayer.currentTime = flvPlayer.buffered.end(0) - 0.1
}
}
}, 500)
// 销毁
function pausemix() {
flvPlayer.pause()
flvPlayer.unload()
flvPlayer.detachMediaElement()//销毁实例
flvPlayer.destroy()
flvPlayer = null
}
关于同时播放多路视频问题(6路以上)
用websocket播放六路以上视频, 需后端将视频的URL单独设置端口, 谷歌浏览器最大可进行6路长链接(浏览器请求并发), 如果想要请求第七路会造成请求阻塞, (由于打包后的js文件按需加载, 会造成js文件请求等待, 页面卡死 )