video播放中页面上画线条-坐标点画图demo效果(整理)

<template>
  <section class="video-box_wrapper">
    <div class="video">
      <div
        v-for="(v, idx) in position"
        :key="idx"
        class="box-line"
        :style="{
          width: `${v.x1 - v.x0}px`,
          height: `${v.y1 - v.y0}px`,
          left: `${v.x0}px`,
          top: `${v.y0}px`
        }">
        {{ v.scope }}
      </div>
      <video width="400" height="400" controls autoplay>
        <source src="https://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
      </video>
    </div>
  </section>
</template>
<script>
const position0 = [
  { x0: 122, y0: 34, x1: 150, y1: 80, scope: 123 },
  { x0: 32, y0: 73, x1: 84, y1: 138, scope: 21 },
  { x0: 150, y0: 174, x1: 250, y1: 294, scope: 71 }
]; // 坐标数组
const position1 = [
  { x0: 211, y0: 134, x1: 259, y1: 243, scope: 81 },
  { x0: 12, y0: 75, x1: 84, y1: 138, scope: 31 },
  { x0: 150, y0: 43, x1: 185, y1: 104, scope: 21 }
]; // 坐标数组
const position2 = [
  { x0: 67, y0: 79, x1: 143, y1: 168, scope: 31 },
  { x0: 92, y0: 139, x1: 184, y1: 214, scope: 721 },
  { x0: 218, y0: 106, x1: 250, y1: 394, scope: 12 }
]; // 坐标数组
const obj = {
  position0,
  position1,
  position2
};
export default {
  name: 'App',
  data () {
    return {
      obj,
      freshTime: 0.6 * 1000, // 数据刷新时间
      position: [
        {x0: 122, y0: 34, x1: 150, y1: 80},
        {x0: 32, y0: 73, x1: 84, y1: 138},
        {x0: 150, y0: 174, x1: 250, y1: 294}
      ] // 坐标数组
    };
  },
  mounted () {
    this.int();
  },
  methods: {
    int () {
      // 定时获取后台返回的坐标数据
      this.time = setInterval(v => {
        const index = Math.floor(Math.random() * 2 + 0);
        this.position = this.obj[`position${index}`];
      }, this.freshTime);
      // 销毁定时任务
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.time);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.video-box_wrapper {
  position: relative;
  .box-line {
    position: absolute;
    z-index: 2;
    border: 1px solid red;
    color: red;
  }
  .video {
    position: relative;
    z-index: 1;
    height: 402px;
    width: 402px;
    margin: 200px;
    border: 1px solid red;
    video {
      height: 400px;
      width: 400px;
    }
  }
}
</style>

<section class="video-box_wrapper">
  <divclass="video">
    <div v-for="(v, idx) in position" :key="idx" class="box-line" :style="{
        width: `${v.x1 - v.x0}px`,
        height: `${v.y1 - v.y0}px`,
        left: `${v.x0}px`,
        top: `${v.y0}px`
      }">
      {{ v.scores }}
    </div>
    <!-- autoplay -->
    <video ref="movie" :style="{ width: videoWidth+'px', height: videoHeight+'px' }" controls
      id="video" @play="handlePlay" @pause="handlePause">
      <source :src="videoSrc" type="video/ogg">
    </video>
  </div>
</section>
data(){
  num: 0,
  // freshTime: 0.6 * 1000, // 数据刷新时间
  freshTime: '', // 数据刷新时间--动态计算
  position: [], // 坐标数组
}
var framesNum = 100; //返回帧数
this.freshTime= (10 / framesNum * 1000).toFixed(3);
var width1 = 1920; //返回原宽度1920-计算缩放后的坐标--500是定义视频大小
for (var i = 0; i < jsarr2.length; i++) {
  for (var k = 0; k < jsarr2[i].videoCalculateResult.length; k++) {
    jsarr2[i].videoCalculateResult[k].x0 = 500 / width1 * jsarr2[i].videoCalculateResult[k].x0;
    jsarr2[i].videoCalculateResult[k].x1 = 500 / width1 * jsarr2[i].videoCalculateResult[k].x1;
    jsarr2[i].videoCalculateResult[k].y0 = 500 / width1 * jsarr2[i].videoCalculateResult[k].y0;
    jsarr2[i].videoCalculateResult[k].y1 = 500 / width1 * jsarr2[i].videoCalculateResult[k].y1;
  }
}
this.jsarr2 = jsarr2;
handlePlay() {
  console.log('视频已开始播放');
  this.int(); //执行-画的框框事件
},
handlePause() {
  clearInterval(this.time);
  console.log('视频已暂停');
  // 销毁定时任务
},
onVideoEnded() {
  console.log('视频播放完成');
  clearInterval(this.time);
  this.int(); //执行-画的框框事件
  this.$forceUpdate();
},
int() {
  // 定时获取后台返回的坐标数据
  this.time = setInterval(v => {
    if (this.num < this.jsarr2.length) {
      this.position = this.jsarr2[this.num].videoCalculateResult;
      this.num++;
    } else {
      this.num = 0;
      clearInterval(this.time);
    }
  }, this.freshTime);
  // 销毁定时任务
  this.$once('hook:beforeDestroy', () => {
    clearInterval(this.time);
  });
},
.video-box_wrapper {
  position:relative;
  .box-line {
    position: absolute;
    z-index: 2;
    border: 1px solid red;
    color: red;
  }
  .video {
    position: relative;
    z-index: 1;
    width: 502px;
    height: 502px;
    // margin: 200px;
    // border: 1px solid red;
    video {
      margin: 0 auto;
      width: 500px;
      height: 500px;
    }
  }
}
/* 隐藏全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}