Vue中使用Hls.js进行视频直播的播放

HLS.js使用文档

1、安装组件：

npm install hls.js --save

2、引入组件：

import Hls from 'hls.js'

3、使用组件：

// DOM：
<video id="video" controls loop="false"></video>
// DATA:
let hls = null // 定义的hls对象
let url = '' // 这个是直播视频流的地址
// 视频加载
let video = document.getElementById('video') // 定义挂载节点
if(Hls.isSupported()) { 
   hls = new Hls();
   hls.loadSource(url); // 设置播放路径
   hls.attachMedia(video); // 解析到video标签上
   hls.on(Hls.Events.MANIFEST_PARSED, function () {
       video.play(); // 播放视频
   });
} else if (video.canPlayType('application/vnd.apple.mpegurl')) { // 如果浏览器原生支持HLS
   video.src = url;
   video.addEventListener('loadedmetadata', function () {
       video.play();
   });
}
// 最后离开页面的时候，记得销毁
onUnmounted(() => {
 if (hls) {
   hls.destroy();
 }
});

4、 如果视频加载不出来导致的黑屏，问题定位：

① 检查 包裹video组件外层的div使用的是v-show控制显隐，而不是v-if。

② 检查 video 组件是否设置了宽高。

③ 检查 挂载节点是否加载完成，可以采用使用setTimeout延迟加载。