vue中使用video.js插件实现视频播放

video.js实现视频播放

在vue中使用video.js实现文件播放。

安装

yarn add video.js

success Saved 24 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @videojs/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

main.js中引入

import Video from "video.js";
import "video.js/dist/video-js.min.css"
Vue.prototype.$video = Video

在VideoPlayer.vue 组件中使用

<template>
  <div class="video_box">
    <video ref="videoPlayer" class="video-js" poster="../../../assets/logo.png">
      <source
        src="../../../../public/static/video/test1.mp4"
        type="video/mp4"
      />
    </video>
  </div>
</template>

<script>
export default {
  name: "VideoPlayer",
  data() {
    return {
      player: null
    };
  },
  mounted() {
    // 播放参数
    let options = {
      controls: true, // 是否显示底部控制栏
      preload: "auto", // 加载
      autoplay: "muted", // 静音播放
      // playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
      width: "640",
      height: "247",
      controlBar: {
        // 自定义按钮的位置
        children: [
          {
            name: "playToggle"
          },
          {
            name: "progressControl"
          },
          {
            name: "currentTimeDisplay"
          },
          {
            name: "timeDivider"
          },
          {
            name: "durationDisplay"
          },

          {
            name: "volumePanel", // 音量调整方式横线条变为竖线条
            inline: false
          },
          {
            name: "pictureInPictureToggle" //画中画播放模式
          },
          {
            name: "fullscreenToggle"
          }
        ]
      }
    };
    this.player = this.$video(this.$refs.videoPlayer, options,function onPlayerReady() {
      console.log('onPlayerReady', this);
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
  }
};
</script>

<style scoped>
.video_box {
  margin: 10px;
  width: 99%;
  height: 450px;
}
.video-js {
  width: 100%;
  height: 450px;
}
</style>

效果