如何在Vue中引入video.js，并如何监听相关事件,禁止拖拽

如何在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
1

b. 在Vue中使用

先定义一个组件video-player，然后将该组件引入页面中。

• video-player.vue

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

c.在页面中使用video-player组件

• AboutView.vue（这个随便啦，找个页面就行）

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

至此，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)
1
2
3

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";
      }
    }
1
2
3
4
5
6
7
8
9