video.js是一个很好的视频播放插件，但是如果移植到vue上相信很多小伙伴很苦恼，是不是网上搜了一堆，发现不好使，我也是踩坑了，后来发现官方文档上就有，好尴尬，建议以后学习先看看官方文档，会有惊喜的。 1.首先安装video.js，然后在main.js中引入
代码语言：javascript复制npm i video.js -D //安装
//main.js 引入
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video;1.先官方基础的使用方法，自定一个组件，说明一下在使用video.js组件时需要在beforeDestroy增加一个dispose()方法，来销毁它，这样就可以解决重复载入报错问题了。
<template>
<div>
<video ref="videoPlayer" class="video-js"></video>
</div>
</template>
<script>
import videojs from 'video.js';
export default {
name: "VideoPlayer",
props: {
options: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
player: null
}
},
mounted() {
this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
console.log('onPlayerReady', this);
})
},
beforeDestroy() {
if (this.player) {
this.player.dispose()
}
}
}
</script>使用的时候
代码语言：javascript复制<template>
<div>
<video-player :options="videoOptions"/>
</div>
</template>
<script>
import VideoPlayer from "@/components/VideoPlayer.vue";
export default {
name: "VideoExample",
components: {
VideoPlayer
},
data() {
return {
videoOptions: {
autoplay: true,
controls: true,
sources: [
{
src:
"/path/to/video.mp4",
type: "video/mp4"
}
]
}
};
}
};以上是最基础的，但是在vue项目中使用感觉还是有问题的，比如跳转到指定的位置去播放视频，视频重复更改源播放地址，就会发现还是有好多问题的，接下来是重点
华丽的分割线 下面这个解决了重复加载视频及预览图片更改二次渲染等问题，不做过多解释，比较忙，懒得敲字直接贴代码了：
代码语言：javascript复制<template>
<div>
<el-button @click="handleClickPlay" type="text" size="small" style="font-size:14px;">打开播放</el-button>
<el-dialog title="播放窗口" append-to-body :visible.sync="playVisible" width="1050px"
:before-close="handleClose">
<div>
<div class="absorbedPicBox">
<video ref="videoPlayer" class="video-js"></video>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "VideoPlayer",
data() {
return {
playVisible:false,
player: null,
options: {
autoplay: true,
controls: true,
poster: "//vjs.zencdn.net/v/oceans.png",
preload: "auto",
'data-setup': '{}',
sources: [
{
src: "//vjs.zencdn.net/v/oceans.mp4",
type: "video/mp4"
}
]
},
}
},
methods: {
handleClose() {
this.playVisible = false;
if (this.player) {
this.player.paused()
}
},
handleClickPlay(){
this.playVisible = true;
let videoParams = {
"begin_time": params.value[1],
"end_time": params.value[2],
"video_id": parseInt(this.$route.params.id),
"student_id": this.stuId
}
api.getTabVideo(videoParams).then(data => {
if (data.code == '000000') {
this.video_begin_time = data.result.video_begin_time;
console.log(this.video_begin_time)
this.options.poster = data.result.img_path;
this.options.sources[0].src = data.result.video_path;
if (this.player) {
this.player.poster(this.options.poster);
this.player.src(this.options.sources[0].src);
this.player.load();
}else{
setTimeout(()=>{
this.initVideo();
},600)
}
}
}).catch(error => {
console.log(JSON.stringify(error));
})
},
initVideo() {
let that = this;
this.player = this.$video(this.$refs.videoPlayer, this.options, function onPlayerReady() {
console.log('onPlayerReady', this);
this.currentTime(that.video_begin_time)
})
}
},
beforeDestroy() {
if (this.player) {
this.player.dispose()
}
}
}
</script>
