- 安装video.js
npm install video.js
- 引入video.js
import videojs from "video.js";
import "video.js/dist/video-js.min.css";
- 应用
<template>
<video class="video-js" ref="videoPlayer" id="videoPlayer" style="width: 100%; height: 100%" v-if="visible"></video>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.min.css";
export default {
name: "VideoDialog",
data() {
return {
options: {
autoplay: true,
controls: true,
fluid: true,
aspectRatio: "16:9",
language: "zh-CN",
techOrder: ["html5"],
sourceOrder: true,
flash: { hls: { withCredentials: false } },
html5: { hls: { withCredentials: false } },
sources: [
{
withCredentials: false,
type: "application/x-mpegURL",
src: "https://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8",
},
],
}
};
},
mounted(){
setTimeout(() => {
this.$nextTick(() => {
this.initVideo();
},300);
});
},
methods: {
initVideo() {
this.player = videojs(
this.$refs.videoPlayer,
this.options,
function onPlayerReady() {}
);
}
}
};
</script>
结束
如需兼容播放mp4之类的视频,动态改下this.options.sources[0].type = '';
let fileName = this.options.sources[0].src.split('.').pop().toLowerCase();
if (fileName && fileName ==='mp4'){
this.options.sources[0].type = '';
}else{
this.options.sources[0].type = "application/x-mpegURL";
}
