简历模板电子版免费_国内外优秀网页设计案例_百度关键词收录排名_谷歌官网入口手机版

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')) { // 如果浏览器原生支持HLSvideo.src = url;video.addEventListener('loadedmetadata', function () {video.play();});
}
// 最后离开页面的时候，记得销毁
onUnmounted(() => {if (hls) {hls.destroy();}
});

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

① 检查 包裹video组件外层的div使用的是v-show控制显隐，而不是v-if。
② 检查 video 组件是否设置了宽高。
③ 检查 挂载节点是否加载完成，可以采用使用setTimeout延迟加载。