在 vue 中使用保利威视视频播放器

在data中

 vodPlayerJs: "https://player.polyv.net/script/player.js",

 this.loadPlayerScript(this.loadPlayer);
      if (this.player) {
        this.onPause();//两个监听事件
        this.onPlay();
      }

我这里不知道到底是vid还是URL，所以两个的取值根据传送的参数决定的

loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement("script");

        myScript.setAttribute("src", this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    // 暂停事件
    onPause() {
      let that=this;

      this.player.on("s2j_onVideoPause", function (e) {
        that.flag=true;
      });
    },
    // 播放事件
    onPlay() {
      const _that = this;

      this.player.on("s2j_onVideoPlay", function (e) {
        _that.flag=false;
      });
    },
    loadPlayer() {
      const polyvPlayer = window.polyvPlayer;

      this.player = polyvPlayer({
        wrap: "#player" + this.index,
        width: "100%",
        height: "544",
        vid: this.vid,
        autoplay: false,
        ban_preview_video: "on",
        allowFullscreen:false,
        url: this.url,
      });
    },

关于全屏的问题
由于保利威的全屏不能带我自己写的进度条

let element = document.documentElement.getElementsByClassName("vue-video-player")[0];
      let player=document.getElementsByClassName('pv-video-player')[0];
      
      // this.player.toggleFullscreen();//保利威的全屏方法
      if (this.fullscreen) {
        player.style.height="544px";//用来设置保利威的视频大小，我设置AUTO或者100%的时候高度就为0了不知道为什么
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }

      } else {
        player.style.height="100vh";
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;

最后附上一些我自己写的菜单栏的方法

进度条的

var that = this;
      var oDiv1 = document.getElementById('d2');
      var oDiv2 = document.getElementById('bg1');
      var oDiv3 = document.getElementById('drag1');

      oDiv3.onmousedown = function (e) {
        var oEvent = e || event;
        var downLg = oEvent.clientX - oDiv3.offsetLeft;

        e.preventDefault();
        e.stopPropagation();
        document.onmousemove = function (ev) {
          var oEvent = ev || event;
          var moveLg = oEvent.clientX - downLg;

          ev.preventDefault();
          ev.stopPropagation();
          if (moveLg < 0) {
            moveLg = 0;
          }
          else if (moveLg > oDiv1.offsetWidth - oDiv3.offsetWidth + 14) {
            moveLg = oDiv1.offsetWidth - oDiv3.offsetWidth + 14;
          }
          oDiv2.style.width = moveLg + 'px';
          oDiv3.style.left = moveLg + 'px';
          that.currentTime1 = moveLg / 458 * that.allTime1;
          that.currentTime = that.getHMS(moveLg / 458 * that.allTime1);
          that.player.j2s_seekVideo(moveLg / 458 * that.allTime1);
        }
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        }
      }

附上盒子结构
这里面的取值 比如视频总长度，视频当前播放时间可以参考保利威的官方API
https://dev.polyv.net/2020/videoproduct/v-player-sdk/v-player-sdk-web/reference/

<div class="video-bar-bar">
				<div class="video-bar-bar-time">{{currentTime}}</div>
				<div class="video-bar-bar-line" @mousedown="changeTime">
					<div class="video-bar-bar-line-cricle" id="drag1" :style="[{left:currentTime1/allTime1*458+'px'},{}]"></div>//这里是为了设置进度条跟小圆圈的长度与距离
					<div class="video-bar-bar-line-all" id="d2"></div>
					<div class="video-bar-bar-line-get" id="bg1" :style="[{width:currentTime1/allTime1*458+'px'},{}]"></div>
				</div>
				<div class="video-bar-bar-allTime">{{allTime}}</div>
			</div>

关于格式化视频时间

  getHMS(time) {
      const hour = parseInt(time / 3600) < 10 ? '0' + parseInt(time / 3600) : parseInt(time / 3600)
      const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
      const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)

      return hour + ':' + min + ':' + sec
    },

关于音量的设置也是

// 拖拽音量盒子
    changeVal() {
      let that = this;

      var oDiv1 = document.getElementById('d1');
      var oDiv2 = document.getElementById('bg');
      var oDiv3 = document.getElementById('drag');

      oDiv3.onmousedown = function (ev) {
        var oEvent = ev || event;
        var downLg = oEvent.clientY - oDiv3.offsetTop;

        ev.preventDefault();
        ev.stopPropagation();
        document.onmousemove = function (ev) {
          var oEvent = ev || event;
          var moveLg = oEvent.clientY - downLg;

          ev.preventDefault();
          ev.stopPropagation();

          if (moveLg < 0) {
            moveLg = 0;
          } else if (moveLg > 98) {
            moveLg = 98;
          }

          // oDiv2.style.height = 98-moveLg + 'px';
          // oDiv3.style.bottom = 98-moveLg + 'px';
          that.vol = 98 - moveLg;
          that.player.j2s_setVolume((98 - moveLg) / 100);
        }
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        }
      }
    },

同样附上盒子结构

	<div class="video-volume" @click.stop="isShowVol=!isShowVol">
				<div class="video-volume-bar" v-if="isShowVol" @mousedown="changeVal" @click.stop="changeVal">
					<div class="video-volume-bar-cricle" id="drag" :style="[{bottom:vol+'px'},{}]"></div>
					<div class="video-volume-bar-all" id="d1"></div>
					<div class="video-volume-bar-get" id="bg" :style="[{height:vol+'px'},{}]"></div>
				</div>
				<img id="vol" src="../../assets/蒙版组 57@2x.png" @mouseover="hover('vol',require('../../assets/蒙版组 57@2x_1.png'))"
					@mouseout="unhover('vol',require('../../assets/蒙版组 57@2x.png'))">
			</div>

以上
有兴趣的大家可以一起讨论