saas_miniprogram/components/myPlayer/polyvPlayer.vue

<template>
  <view>
    <view class="player_box" style="width: 100%; height: 421rpx">
      <!-- #ifdef MP-WEIXIN -->
      <polyv-player
        id="playerVideo"
        playerId="playerVideo"
        height="421rpx"
        :vid="vid"
        :showSettingBtn="true"
        :enablePlayGesture="true"
        :custom-cache="false"
        :object-fit="'contain'"
        @statechange="wxStatechange"
        @error="playError"
        :autoplay="autoplay"
        :page-gesture="true"
        :vslide-gesture="true"
        :vslide-gesture-in-fullscreen="true"
        :isAllowSeek="allowSeek"
        :playbackRate="playbackRate"
        :enableAutoRotation="enableAutoRotation"
        @loadedmetadata="loadedmetadata"
      ></polyv-player>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view id="player"></view>
      <!-- #endif -->
      <template v-if="videoToastShow">
        <cover-view class="video-toast__close" @click="closeToast()"
          >X</cover-view
        >
        <cover-view class="video-toast">
          <cover-view class="video-toast__text"
            >您上次看到
            {{ $method.secondToDate(vct) }}，正在自动续播</cover-view
          >
          <cover-view class="video-toast__btn" @click="restart()"
            >从头播放</cover-view
          >
        </cover-view>
      </template>
    </view>
  </view>
</template>

<script>
var polyvPlayerContext = null;
export default {
  name: "SaasMiniprogramPolyvPlayer",
  props: {
    playVid: {
      type: String,
      defaule: "",
    },
    autoplay: {
      type: Boolean,
      defaule: false,
    },
    allowSeek: {
      type: String,
      defaule: "on",
    },
    videoCurrentTime: {
      type: Number,
      defaule: 0,
    },
    playbackRate: {
      type: Array,
      defaule: () => {
        return [1.0];
      },
    },
  },
  data() {
    return {
      barTimer: null,
      vodPlayerJs: "https://player.polyv.net/resp/vod-player/latest/player.js",
      videoToastShow: false,
      enableAutoRotation: true,
      hasStart: false,
      config: null,
      Elevideo: null,
    };
  },
  mounted() {
    if (this.vid) {
      this.changeVid(this.vid);
    }
    // if (this.vct > 0) {
    //   this.videoToastShow = true;
    //   setTimeout(() => {
    //     this.closeToast();
    //   }, 3000);
    // }
  },
  methods: {
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    // 播放视频
    loadPlayer() {
      const polyvPlayer = window.polyvPlayer;
      this.$api.polyvVideoSign(this.vid).then(async (res) => {
        let option = {
          showLine: "off",
          ban_history_time: "on",
          vid: this.vid,
          forceH5: true,
          autoplay: this.autoplay, // 自动播放
          ban_seek: this.allowSeek, // 是否禁止拖拽进度条
          speed: this.playbackRate, // 倍数
          banSeekDeviation: 7, // 做兼容
          teaser_show: 1,
          tail_show: 1,
          hideSwitchPlayer: true,
          watchStartTime: this.videoCurrentTime, // 播放开始时间，表示视频从第几秒开始播放，参数值需小于视频时长
          ts: res.data.data.ts, // 移动播放加密视频需传入的时间戳。
          sign: res.data.data.sign, // 移动端播放加密视频所需的签名
        };
        if (polyvPlayerContext) {
          polyvPlayerContext.changeVid(option);
        } else {
          option = {
            wrap: "#player",
            width: "100%",
            height: 218,
            ...option,
          };
          polyvPlayerContext = polyvPlayer(option);
          this.h5StateChange();
        }
      });
    },
    wxStatechange(newstate) {
      console.log("lwxStatechange", newstate);
      // ["playing", "pause", "ended","error"]
      let state = newstate.detail.newstate;
      if (state == "error") {
        state = "playerError";
      }
      this[state] && this[state]();
      this.$emit(state);
    },
    playing() {
      // #ifdef MP-WEIXIN
      polyvPlayerContext.seek(this.videoCurrentTime || 0);
      // #endif
      // #ifdef H5
      this.Elevideo = document.querySelector("video.plv-player-video");
      this.Elevideo &&
        this.Elevideo.addEventListener("timeupdate", this.timeupdate);
      // #endif
    },
    resumeVideo() {
      // #ifdef MP-WEIXIN
      polyvPlayerContext.play();
      // #endif
      // #ifdef H5
      polyvPlayerContext.j2s_resumeVideo();
      // #endif
    },
    playerError(err) {
      console.log("播放err", err);
    },
    timeupdate(e) {
      this.$emit("timeupdate", this.playCurrentTime());
    },
    h5StateChange() {
      let states = {
        s2j_onPlayerInitOver: "onPlayerInitOver", // 播放器初始化完毕时触发
        s2j_onPlayStart: "onPlayStart", // 视频初次播放时触发
        s2j_onVideoPause: "pause", // 视频暂停时触发
        s2j_onVideoPlay: "playing", // 视频初次播放或由暂停恢复播放时触发
        s2j_onPlayOver: "ended", // 当前视频播放完毕时触发
        s2j_onVideoSeek: "onVideoSeek", // 视频拖拽进度时触发
        s2j_onPlayerError: "playerError", // 播放出现错误时触发
        serverError: "playerError", // 逻辑错误
      };
      let that = this;
      for (const key in states) {
        polyvPlayerContext.on(key, function () {
          that[states[key]] && that[states[key]](...arguments);
          that.$emit(states[key]);
        });
      }
    },
    onVideoSeek(start, end, vid) {
      polyvPlayerContext.toggleFullscreen();
      if (this.allowSeek !== "on") {
        return;
      }
      if (end - start > 10) {
        polyvPlayerContext.j2s_seekVideo(start);
      }
    },
    seekVideo(time) {
      console.log("🚀 ~ file: polyvPlayer.vue:173 ~ seekVideo ~ time:", time);
      time = time || 0;
      // #ifdef MP-WEIXIN
      polyvPlayerContext.seek(time);
      // #endif
      // #ifdef H5
      polyvPlayerContext.j2s_seekVideo(time);
      // #endif
    },
    restart() {
      this.seekVideo(0);
      this.closeToast();
    },
    // 播放时刻
    playCurrentTime() {
      if (!polyvPlayerContext) {
        return 0;
      }
      // #ifdef MP-WEIXIN
      return polyvPlayerContext.getCurrentTime(); //播放时刻
      // #endif
      // #ifdef H5
      return polyvPlayerContext.j2s_getCurrentTime();
      // #endif
    },
    getDuration() {
      // #ifdef MP-WEIXIN
      return polyvPlayerContext.getDuration();
      // #endif
      // #ifdef H5
      return polyvPlayerContext.j2s_getDuration();
      // #endif
    },
    // 本次看的时长
    playVideoTime() {
      if (!polyvPlayerContext) {
        return 0;
      }
      // #ifdef MP-WEIXIN
      return polyvPlayerContext.getVideoPlayDuration();
      // #endif
      // #ifdef H5
      return polyvPlayerContext.j2s_realPlayVideoTime();
      // #endif
    },
    // 暂停播放
    playPause() {
      // #ifdef MP-WEIXIN
      polyvPlayerContext.pause();
      // #endif
      // #ifdef H5
      polyvPlayerContext.j2s_pauseVideo();
      // #endif
    },
    // 退出全屏
    exitFullScreen() {
      // #ifdef MP-WEIXIN
      polyvPlayerContext.exitFullScreen();
      // #endif
      // #ifdef H5
      polyvPlayerContext.toggleFullscreen();
      // #endif
    },
    onPlayerInitOver() {
      uni.$on("playPause", this.playPause);
      this.$emit("loadedmetadata", polyvPlayerContext);
    },
    onPlayStart() {},
    loadedmetadata() {
      if (this.hasStart) {
        // 防止loadedmetadata事件第二次触发
        return;
      }
      this.hasStart = true;
      setTimeout(() => {
        this.hasStart = false;
      }, 3000);
      // #ifdef MP-WEIXIN
      polyvPlayerContext = this.selectComponent("#playerVideo");
      // #endif
      this.onPlayerInitOver();
    },
    changeVid(data) {
      if (!data) {
        return;
      }
      this.config = this.$method.isObject(data)
        ? data
        : { vid: data, videoCurrentTime: this.videoCurrentTime };
      if (!this.vid) {
        return;
      }
      // #ifdef H5
      this.loadPlayerScript(this.loadPlayer);
      // #endif
      // #ifdef MP-WEIXIN
      if (polyvPlayerContext) {
        polyvPlayerContext.changeVid(this.vid);
        this.seekVideo(this.videoCurrentTime);
      }
      // #endif
    },
    closeToast() {
      this.videoToastShow = false;
    },
  },
  destroyed() {
    if (polyvPlayerContext) {
      polyvPlayerContext.destroy();
    }
    // #ifdef H5
    this.Elevideo &&
      this.Elevideo.removeEventListener("timeupdate", this.timeupdate, false);
    // #endif
  },
  computed: {
    vid() {
      return this.config ? this.config.vid : this.playVid;
    },
    vct() {
      return (
        (this.config ? this.config.videoCurrentTime : this.videoCurrentTime) ||
        0
      );
    },
  },
  watch: {
    vct: {
      handler(time) {
        if (time > 0 && !this.videoToastShow) {
          this.videoToastShow = true;
          setTimeout(() => {
            this.closeToast();
          }, 3000);
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.player_box {
  position: relative;
  #playerVideo {
    position: relative;
    z-index: 99;
    width: 200rpx;
    height: 200rpx;
  }
  .video-toast {
    position: absolute;
    width: 686rpx;
    height: 80rpx;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 24rpx;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    display: flex;
    font-size: 26rpx;
    align-items: center;
    overflow: visible;
    z-index: 999;
    &__text {
      flex: 1;
      margin-left: 40rpx;
    }

    &__btn {
      width: 180rpx;
      text-align: center;
      border-left: 1rpx solid #fff;
    }
  }
  .video-toast__close {
    position: absolute;
    right: 32rpx;
    bottom: 184rpx;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.3);
  }
}
</style>