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延迟加载。

原文地址：https://blog.csdn.net/Y1914960928/article/details/142553817

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！