自定义视频右键功能

视频自定义右键

安装插件

npm install v-contextmenu

引入插件

main.js

import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'
Vue.use(contentmenu)

使用组件(关闭视频自带的控件)

     <div
       v-contextmenu:contextmenu
       class="video-item"
       :id="item.id"
        v-for="(item, index) in videoList"
        :key="index"
         @dblclick="dblclickHandle(index, item)"
         >
         <video
         :id="'videoElement' + item.id"
          muted
          :autoplay="true">
         </video>
      </div>
​
  <!-- 右键菜单 -->
        <v-contextmenu ref="contextmenu">
          <v-contextmenu-submenu
            title="分屏"
                 :icon="require('1.png')"
          >
            <v-contextmenu-item @click="switchItem(1, 0)"
              ><img
                class="icon-img"
                src="1.png"
                alt=""
              />1画面</v-contextmenu-item
            >
            <v-contextmenu-item @click="switchItem(4, 1)"
              ><img
                class="icon-img"
                src="4.png"
                alt=""
              />4画面</v-contextmenu-item
            >
            <v-contextmenu-item @click="switchItem(8, 2)"
              ><img
                class="icon-img"
                src="8.png"
                alt=""
              />8画面</v-contextmenu-item
            >
            <v-contextmenu-item @click="switchItem(9, 3)"
              ><img
                class="icon-img"
                src="9.png"
                alt=""
              />9画面</v-contextmenu-item
            >
          </v-contextmenu-submenu>
          <v-contextmenu-item @click="prevPage">上一页</v-contextmenu-item>
          <v-contextmenu-item @click="nextPage">下一页</v-contextmenu-item>
          <v-contextmenu-item @click.native="FullScreenHandle"
            >全屏</v-contextmenu-item
          >
        </v-contextmenu>  
​
import flvJs from "flv.js";
//使用flv.js初始化视频
  mounted() {
    this.flvInit();
  },
  methods:{
    flvInit() {
      let that = this;
      if (that.videoList.length > 0) {
        that.videoList.forEach((item) => {
          let videoPlayer = document.getElementById("videoElement" + item.id); 
          if (flvJs.isSupported()) {
            //判断当前浏览器是否支持flv
            //创建flv实例
            that.flvPlayer = flvJs.createPlayer(
              {
                //MediaDataSource
                type: "flv",
                isLive: true, // 开启直播
                hasAudio: false, // 关闭声音
                cors: true, // 开启跨域访问
                url: item.url,
              },
              {
                //Config
                enableWorker: false,
                enableStashBuffer: false,
                isLive: true,
              }
            );
            if (videoPlayer != null) {
              that.flvPlayer.attachMediaElement(videoPlayer); //挂载video标签
              that.flvPlayer.load(); //加载
​
              let playPromise = that.flvPlayer.play(); //播放
              if (playPromise !== undefined) {
                playPromise
                  .then(() => {
                    that.flvPlayer.play();
                  })
                  .catch(() => {});
              }
            }
          }
        });
      }
    },
​
 // 视频列表全屏
    FullScreenHandle() {
      //dom全屏
      let videoPlayer = document.getElementById("videoList"); //获取dom
      videoPlayer.webkitRequestFullscreen();
       //选择视频元素全屏
       //先左键选择视频存储id
        let videoPlayer = document.getElementById("" + this.selectVideoId); 
        videoPlayer.webkitRequestFullscreen();
    },
   // 双击视频
   dblclickHandle(i,item){}
  }