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

<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";
      }
    }