一、安装
$ npm install video.js
二、main.js全局引入
// 引入video.js
import Videojs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Videojs
三、组件中的使用
<div class="contentItem" v-for="(item,index) in this.jdvideoList2" :key="index">
<video ref="video" width="800" height="328" :id="item.videoId" class="video-js vjs-big-play-centered vjs-fluid" controls preload="auto">
<source type="video/mp4" :src="item.url">
</video>
</div>
// 该方法在 methods 中定义，在获取到数据后调用，index 为组件中绑定的动态 id；url 为视频地址
initVideo(index,url) {
this.$nextTick(() => {
let myPlayer = this.$video(document.getElementById(`${
index}`), {
controls: true,
//自动播放属性,muted:静音播放
autoplay: false,
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
preload: "auto",
//设置视频播放器的显示宽度（以像素为单位）
// width: "800px",
//设置视频播放器的显示高度（以像素为单位）
// height: "400px",
playbackRates: [0.5, 1, 1.5, 2, 3],// 倍速播放
controlBar: {
playToggle:true
},
});
myPlayer.src(url); // 重新初始化URL
// myPlayer.load(url); //重新加载
})
},
// 设置视频宽度和高度，注意不要再标签上写 style，会导致全屏无效
<style lang="less" scoped>
.video_box {
margin: 10px;
width: 580px;
height: 328px;
}
.video-js {
width: 580px;
height: 328px;
}
</style>
四、自定义按钮位置
initVideo(index,url) {
this.$nextTick(() => {
let myPlayer = this.$video(document.getElementById(`${
index}`), {
controls: true, // 是否显示控制条
// poster: 'xxx', // 视频封面图地址
preload: 'auto',
autoplay: false,
fluid: true, // 自适应宽高
language: 'zh-CN', // 设置语言
muted: false, // 是否静音
inactivityTimeout: false,
playbackRates: [0.5, 1, 1.5, 2, 3],// 倍速播放
controlBar: {
// 自定义按钮的位置
children: [
{
name: 'playToggle'}, // 播放按钮
{
name: 'currentTimeDisplay'}, // 当前已播放时间
{
name: 'progressControl'}, // 播放进度条
{
name: 'durationDisplay'}, // 总时间
{
// 倍数播放
name: 'playbackRateMenuButton',
'playbackRates': [0.5, 1, 1.5, 2, 2.5]
},
{
name: 'volumePanel', // 音量控制
inline: false, // 不使用水平方式
},
{
name: 'FullscreenToggle'} // 全屏
// {
// name: "pictureInPictureToggle" //画中画播放模式
// },
]
},
});
myPlayer.src(url); // 重新初始化URL
// myPlayer.load(url); //重新加载
})
},