欢迎使用Markdown编辑器

一、初始创建

我司项目中不仅需要有适配video的组件，还需要有适配hls视频流的组件，具体hls视频流研究不深，不过综合考虑了很多大神的项，特选取videojs作为hls视频插件。代码如下

1.1 安装

npm i video.js --save
npm i videojs-contrib-hls --save

1.2引用

import videojs from "video.js";
import "videojs-contrib-hls";
import "@videojs/http-streaming";

1.3dom部分

// 
<video :controls="styleColor.controls" ref="cameraMonitoringVideo"
class="video-js vjs-default-skin vjs-fluid" preload="auto" :style="{
width: transStyle.width + 'px',
height: transStyle.height + 'px',
objectFit: 'fill'
}">
<source :src="styleColor.videoAdress" type="application/x-mpegURL" />
</video>

1.4JS部分

import videojs from "video.js";
import "videojs-contrib-hls";
import "@videojs/http-streaming";
export default {
name: "WidgetVideoHls",
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
options: {},
player: null,
defaultAdress:
"https://xxxx.m3u8"
};
},
computed: {
transStyle() {
return this.objToOne(this.options);
},
styleColor() {
console.log('传过来的视频源', this.transStyle.videoAdress)
return {
position: this.ispreview ? "absolute" : "static",
width: this.transStyle.width + "px",
height: this.transStyle.height + "px",
left: this.transStyle.left + "px",
top: this.transStyle.top + "px",
right: this.transStyle.right + "px",
videoAdress: this.transStyle.videoAdress,
controls: this.transStyle.controls
};
}
},
watch: {
// 监听视频源切换： 
'transStyle.videoAdress': {
handler(val, val1) {
console.log('已经开始监听了', val,val1)
if(val == val1){
return
}
console.log('判断两个链接不相等', this.transStyle.videoAdress)
if(!val){
return
}
console.log('判断新的链接有值')
if(this.player ){
// 此时可以直接设置新的src地址。 
this.player.src(this.transStyle.videoAdress)
this.player.play(); // 自动播放
}else{
this.initVideo()
}
},
deep: true
}
},
mounted() {
this.options = this.value;
//
this.initVideo();
},
beforeDestroy() {
if (this.player != null) {
// dispose()会直接删除Dom元素
this.player.dispose();
}
},
methods: {
initVideo() {
// 此处注意： 如果直接调用方法，会在控制台报错：no compatible source was found for this media
this.$nextTick(() => {
this.player = videojs(
this.$refs.cameraMonitoringVideo,
{
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true,
muted: true //静音模式 、、 解决首次页面加载播放。
},
() => {
// this.player.size(this.styleColor.width,this.styleColor.height);
this.player.width(500);
this.player.height(300);
this.player.play(); // 自动播放
}
);
})
}
}
};

最后

以上就是含糊鸡翅为你收集整理的videojs 使用记录欢迎使用Markdown编辑器的全部内容，希望文章能够帮你解决videojs 使用记录欢迎使用Markdown编辑器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。