什么是m3u8视频?
m3u8是苹果公司推出的视频播放标准,是m3u的一种,只是编码格式采用的是UTF-8。
在vue框架项目中如何使用? (将 展示m3u8视频的功能做成组件)
引入video.js
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<div :style="{ width: videoWidth, height: videoHeight }">
<video
:id="videoId"
style="width: 100%; height: 100%"
class="video-js"
></video>
</div>
export default {
props: {
//视频地址、video的id值
vData: {
type: Object,
default: () => {
return {
hlsurl: "", //视频url地址
cameraId: "", //id
};
},
},
//视频宽度
videoWidth: {
type: String,
default: "100%",
},
//视频高度
videoHeight: {
type: String,
default: "100%",
},
},
data() {
return {
options: {
autoplay: true, // 设置自动播放
muted: true, // 设置了它为true,才可实现自动播放,同时视频也被静音 (Chrome66及以上版本,禁止音视频的自动播放)
preload: "auto", // 预加载
controls: true, // 显示播放的控件
},
player: null,
videoId: "",
};
},
methods: {
getVideo(nowPlayVideoUrl, nowPlayVideoId) {
this.player = videojs(nowPlayVideoId, this.options);
// 关键代码, 动态设置src,才可实现换台操作
//不动态设置依然也可以这样写
this.player.src([
{
src: nowPlayVideoUrl,
type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
},
]);
},
},
watch: {
//监听视频地址、video的id值
vData: {
deep: true,
immediate: true,
handler(val) {
this.videoId = val.cameraId;
this.$nextTick(() => {
this.getVideo(val.hlsurl, val.cameraId);
});
},
},
},
beforeDestroy() {
// 组件销毁时,清除播放器
if (this.player) {
this.player.dispose(); // 该方法会重置videojs的内部状态并移除dom
}
},
};