在vue中使用video.js 以及viewer.js

安装并引入

文档
本文无参考价值。

import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Vue from "vue";
Vue.use(Viewer);
import videojs from "video.js"; 
import "video.js/dist/video-js.css";

viewer的用法比较简单

<div v-viewer>
    <img v-for="(item,i) in  imgsList" :key="i" :src="item.fileUrl" alt />
    </div>

给要展示的图片的父级元素 写上v-viewer属性即可。

videojs

注意：尽量不要将其放在弹窗中，可能会导致获取不到id。

 <div class="video_box" id="operator" v-show="this.videoUrl">
      <video ref="videoPlayer" class="video-js" poster="@/assets/烟气视频.png">
        
      </video>
    </div>

初始化方法

//打开视频
    videoImg(item) {
      this.videoUrl = item.fileUrl;
      // console.log(this.videoUrl);
      let options = {
        controls: true, // 是否显示底部控制栏
        preload: "auto", // 加载<video>标签后是否加载视频
        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 = videojs(
        this.$refs.videoPlayer,
        options,
        function onPlayerReady() {
          // console.log("onPlayerReady", this);
        }
      );
      // console.log(this.player);
      this.player.src({
        src: this.videoUrl,
      });
      var CloseButton = videojs.getComponent("CloseButton");
      CloseButton.prototype.handleClick = () => this.closeVideo();
      var closeButton = new CloseButton(this.player);
      this.player.addChild(closeButton);
      document.getElementById("operator").style.display = "block";
    },
    //关闭播放框
    closeVideo() {
      document.getElementById("operator").style.display = "none";
    },

beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },