Vue 使用 Video.js_vue使用video.js

一、安装

 $ npm install video.js
1

二、main.js全局引入

// 引入video.js
 
import Videojs from 'video.js'
 
import 'video.js/dist/video-js.css'
 
Vue.prototype.$video = Videojs
1
2
3
4
5
6
7

三、组件中的使用

<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>
1
2
3
4
5

// 该方法在 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); //重新加载
  })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 设置视频宽度和高度，注意不要再标签上写 style，会导致全屏无效
<style lang="less" scoped>
.video_box {
  margin: 10px;
  width: 580px;
  height: 328px;
}
.video-js {
  width: 580px;
  height: 328px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12

四、自定义按钮位置

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); //重新加载
  })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38