如何在Vue中引入video.js,并如何监听相关事件
最近考虑做一个视频播放网站,所以接触video.js会多一些,之前考虑到使用Vue-video-player
来实现相关功能,结果发现当前技术已不再支持Flash播放器,无奈采用videojs
,官方文档链接奉上Video.js
1. Vue使用Video.js
a.引入video.js
使用npm安装
npm i --save-dev video.js
b. 在Vue中使用
先定义一个组件video-player
,然后将该组件引入页面中。
- video-player.vue
<template>
<div>
<video ref="videoPlayer" class="video-js"></video>
</div>
</template>
<script>
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
// Video标签设置为中文
videojs.addLanguage('zh-CN', video_zhCN)
let videoTime = 0;
export default {
name: "video-player",
props: {
options: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
player: null,
currentTime: 0,
PercentageProgress: 0,
nowProgress: 0,
isDrag: false, // 设置为不可拖动
}
},
mounted() {
// 初始化播放器
const that = this;
this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
that.getVideoTime();
that.registDrug();
})
// 监听暂停状态
this.player.on('pause', (event) => {
this.getVideoProgress();
});
// 监听播放状态
this.player.on('play', function (event) {
that.videoPlay();
});
// 监听视频播放结束
this.player.on('ended', function (event) {
that.videoEned();
});
// 监听事件更新
this.player.on('timeupdate', () => {
this.getVideoCurrentTime();
});
},
beforeDestroy() {
if (this.player) {
this.player.dispose()
}
},
methods: {
// 获取视频时长
getVideoTime() {
let video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
videoTime = video.duration;
console.log(`视频播放长度时${videoTime}s`);
});
},
// 获取当前视频播放进度
getVideoProgress() {
this.nowProgress = Math.floor((this.currentTime / videoTime) * 100)
console.log(`视频播放进度为${this.nowProgress}%`)
},
// 获取当前视频时间
getVideoCurrentTime() {
const video = document.querySelector('video');
this.currentTime = video.currentTime;
},
// 设置视频当前播放时间
setVideTime(time) {
console.log('执行重置时间')
this.player.currentTime(time);
},
// 鼠标拖动进度条事件
mouseDrag() {
console.log('监听到拖拽')
isMousedown = true;
// 将拖动前的时间点给oldTime
console.log(this.currentTime, '当前时间')
oldTime = this.currentTime;
},
videoPlay() {
// 视频播放函数
console.log('视频播放');
},
videoEned() {
// 视频播放暂停
console.log('视频暂停');
},
// 注册禁止播放按钮事件
registDrug() {
if (this.isDrag) {
//启用拖动
document.querySelector(".vjs-progress-control").style.pointerEvents = "auto";
} else {
//禁用拖动
document.querySelector(".vjs-progress-control").style.pointerEvents = "none";
}
}
}
}
</script>
<style scoped></style>
c.在页面中使用video-player
组件
- AboutView.vue(这个随便啦,找个页面就行)
<template>
<div class="background">
<div>
<el-row>
<el-col :span="20" :offset="2" class="welcome-row">
<span class="welcome">视频测试</span>
</el-col>
</el-row>
<el-row>
<el-col :span="10" :offset="7">
<div class="video-box">
<div class="video">
<!--这里即是引用的组件,外层css可以修饰播放器的样式-->
<video-player :options="videoOptions" class="video-css" />
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import VideoPlayer from '@/components/video-player/video-player.vue'
import 'video.js/dist/video-js.css';
export default {
name: "PageOne",
components: {
VideoPlayer,
},
data() {
return {
videoOptions: {
controls: true,// 开启交互,即是用户可控。
muted: true,// 开启视频时是否静音
fluid: true,// 根据外层css样式大小,自动填充宽高!比较实用,可搭配响应式
reload: "auto",// 重载
language: "zh-CN",// 设置语言为中文
poster: require('@/assets/images/1.png'),//视频封面
sources: [//视频播放源,建议本地
{
src: require('@/assets/videos/1.mp4'),
type: "video/mp4"
}
]
}
}
},
created() {
},
methods: {
},
}
</script>
<style scoped>
.background {
background: linear-gradient(to right, #c2e59c, #64b3f4);
width: 100%;
height: calc(100vh - 57px);
}
.welcome-row {
text-align: center;
}
.welcome {
color: white;
font-size: 64px;
font-weight: 600;
font-family: helveticaneuew01-75bold, sans-serif;
}
.video-box {
width: 100%;
min-width: 456px;
height: 100%;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
margin-top: 24px;
}
.video {
width: 92%;
}
.video-css {
width: 100%;
height: 100%;
}
</style>
至此,vue使用video.js教程结束。
2. Video.js设置UI界面为中文
倘若直接使用Video.js时会发现用户操作界面都为英文,那么该如何将其改为中文呢?(其实我给的案例久以及给了答案)
a.在组件中引入语言文件
b.给videojs添加语言
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
// Video标签设置为中文
videojs.addLanguage('zh-CN', video_zhCN)
c.在初始化options
时,添加 language: "zh-CN"
3. 如何设置进度条不可拖拽
在我写的项目中,用到不可拖拽这个功能,实现方式也有很多,比如使用video.js自带的api实现,但我试了这个方法没有效果。所以我使用css来帮助实现。
registDrug() {
if (this.isDrag) {
//启用拖动
document.querySelector(".vjs-progress-control").style.pointerEvents = "auto";
} else {
//禁用拖动
document.querySelector(".vjs-progress-control").style.pointerEvents = "none";
}
}