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

b. 在Vue中使用

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

• video-player.vue

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

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

至此，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";
      }
    }