video-player 播放统计

最近在做vue的视频播放时用video-player发现了好多问题细不谈上菜！

html代码片段（这个没啥好说的）：

<template>
  <div class="container" v-if="flag == 'Y'">
    <div class="videoBtn" @click="onShowVideo">
      <van-notice-bar
        left-icon="https://resource.unionlife.com.cn/vue/service/warrantyService/index/trumpet.png"
        text="点击此处可查看本页面操作流程讲解视频"
        background="#fff"
        :scrollable="true"
        color="#666666"
      />
    </div>
    <div class="popup">
      <van-popup v-model="showPopup"
       @click-overlay="onOverlay" 
       :close-on-click-overlay ="false"
       :overlay= "false"
       >
        <div class="videoBox">
          <video-player
            v-if="isFalse"
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
            @playing="onPlayerPlaying($event)"
            @ended="onPlayerEnded($event)"
            @timeupdate = "onPlayerTimeupdate($event)"
            @waiting="onPlayerWaiting($event)"
            @canplay="onPlayerCanplay($event)"
          />
          
        </div>
      </van-popup>
      <van-popup v-model="showPopupTwo" class="butBox" :close-on-click-overlay ="false">
        <div class="backBtn" @click="closeBlack(1)">
            <img
              alt=""
              src="https://resource.unionlife.com.cn/micromwp/ps/pub/mistake.png"
            />
          </div>
          <div class="rebroadcast" @click="onRebroadcast">
            <img src="https://resource.unionlife.com.cn/micromwp/ps/pub/replay.png" alt="">
            <p>重新播放</p>
          </div>
      </van-popup>
    </div>
    <div class="overlayUp" v-if="showOverlayUp">
      <div class="backBtn" @click="closeBlack(2)" v-show="isClseTwo">
            <img
              alt=""
              src="https://resource.unionlife.com.cn/micromwp/ps/pub/mistake.png"
            />
        </div>
    </div>
  </div>
</template>

重点在js中（ 

思路是获取当前播放时间及总播放时间才可以调接口、首次点击播放和点击重新播放才可以调用接口。

查了好多的资料才找到获取如何获取总播放时间，和当前播放时间 (菜的) -v- 

        // 获取当前播放时间
            onPlayerTimeupdate($event){
      this.currentTime = $event.cache_.currentTime;
      this.duration = $event.cache_.duration;
}），

// 播放回调
    onPlayerPlaying($event) {
      console.log($event);
      this.nuber ++;
      console.log(this.currentTime,this.duration,this.nuber)
      if(this.nuber == 1 ){
        this.statistical();
      }else if(this.currentTime == this.duration){
        this.statistical();
      }
    },

）

 <script>
import { axiosH5Post } from "@/api/http/index.js";
export default {
  name: "",
  props: {
    videoList: {
    type: Object,
    default () {
      return {}
    }
  }
  },
  data() {
    return {
      showPopup: false,
      showPopupTwo:false,
      showOverlayUp:false,
      isClseTwo : true,
      isFalse: true,
      isPlayer: true,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: "",
          },
        ],
        poster: "", // 你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮
        },
      },
      playFlag:true,
      flag:"",
      parentItemId:"",
      itemId:"",
      currentTime: "",  // 视频当前播放时间
      duration:"" , // 视频时间总长度
      nuber : 0,
    };
  },
  watch:{
    videoList(val,old){
      this.playerOptions.sources[0].src = val.videoUrl;
      this.flag = val.flag;
      this.itemId = val.itemId;
      this.parentItemId = val.parentItemId;
      console.log(val,old,"/././././././././>>>>>");
    },
    deep:true ,
  },
  mounted() {},
  methods: {
    onShowVideo(){
      this.showPopup = true;
      this.showOverlayUp = true;
    },
    // 播放回调
    onPlayerPlaying($event) {
      console.log($event);
      this.nuber ++;
      console.log(this.currentTime,this.duration,this.nuber)
      if(this.nuber == 1 ){
        this.statistical();
      }else if(this.currentTime == this.duration){
        this.statistical();
      }
    },
    // 视频播完回调
    onPlayerEnded($event) {
        console.log("播放完了",$event);
        this.showPopupTwo = true;
        this.isClseTwo = false;
        
      },
    // 获取当前播放时间
    onPlayerTimeupdate($event){
      this.currentTime = $event.cache_.currentTime;
      this.duration = $event.cache_.duration;
      // console.log("onPlayerTimeupdate",$event.cache_.currentTime,$event.cache_.duration);
    },

    statistical(){
       let typeAll = {
        type: 2,
        itemId: this.infoId,
        parentItemId:this.parentItemId,
      };
      axiosH5Post("接口002", typeAll)
        .then((res) => {
          console.log("视屏播放量", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
      // 点击关闭按钮
    closeBlack(item){
        this.showPopup = false;
        this.showPopupTwo = false;
         this.showOverlayUp = false;
        this.playFlag = false;
        this.$refs.videoPlayer.player.src('https://test-resource.unionlife.com.cn/cms/video/20220310/a58c61cc214a4079826a1f6454ce0615.mp4');
        if(item == 1){
          this.isClseTwo = true;
        }
      },
    // 点击重新播放
    onRebroadcast(){
      console.log("点击了重新播放!");
      this.nuber = 0;
      this.showPopupTwo = false;
      this.isClseTwo = true;      
      this.$refs.videoPlayer.player.src('https://test-resource.unionlife.com.cn/cms/video/20220310/a58c61cc214a4079826a1f6454ce0615.mp4');
      this.$refs.videoPlayer.player.play();

    },  
    // 点击遮罩关闭popup弹窗
    onOverlay(){
      this.$refs.videoPlayer.player.src('https://test-resource.unionlife.com.cn/cms/video/20220310/a58c61cc214a4079826a1f6454ce0615.mp4');
    },
  },
};
</script>

css中：

<style scoped lang='scss'>
.container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px 16px;
  background: #f7f7f7;
  .videoBtn {
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0px 4px 8px 2px rgba(85, 149, 135, 0.04);
    border-radius: 4px;
  }
  .overlayUp{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
     .backBtn {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 1%;
        right: 1%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        cursor: pointer;
          img {
          width: 100%;
          height: 100%;
        }
      }
  }
  .popup {
    width: 100%;
    height: 100%;
    position: relative;
    .videoBox {
      min-width: 375px;
      height: 100%;
      ::v-deep.video-js .vjs-tech{
        top:-1px;
      }
    }
    .butBox{
      background: none;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .backBtn {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 1%;
        right: 1%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        cursor: pointer;
          img {
          width: 100%;
          height: 100%;
        }
      }
      .rebroadcast{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        img{
          width: 50px;
          height: 50px;
        }
        p{
          font-size: 16px;
          font-weight: 600;
          color: #FFFFFF;
          line-height: 22px;
        }
      }
    } 
  }
}
::v-deep .van-notice-bar {
  border-radius: 4px;
}
</style>

总结：菜的，我先洗洗睡了！