video.js在vue项目中的使用
1. 安装
npm install video.js
2. 导入
import videojs from "video.js"
import "video.js/dist/video-js.css"
3. 使用
模板中：
script中:
this.videoOptions = {
controls: true,
muted: true,
fluid: true,
reload: 'auto',
sources: [
{
src: "视频的url", // todo 改为自己的视频url
type: 'video/mp4',
},
],
}
this.player = videojs("videoid", this.videoOptions, function onPlayerReady() {
videojs.log('Your player is ready!')
this.play()
this.on("play", function () {
// todo
})
this.on("seeked", function () {
// todo 跳转触发
})
this.on('ended', function () {
videojs.log('视频播放结束'); // todo
})
})
更多接口，请查看官方文档https://videojs.com/。
BUG
切换页面再切回时，video.js黑屏
解决： 在页面取消挂载时，需要销毁player
beforeUnmount() {
if (this.player) {
this.player.dispose()
}
}
注意：如果是vue2，生命周期函数是beforeDestroy。