动态跟踪优化

src/assets/scss/myVideo.scss

@@ -2,7 +2,5 @@
   position: absolute;
   top: 30px;
   left: 60px;
-  width: 30px;
-  height: 80px;
   border: 1px solid red;
 }
\ No newline at end of file

src/components/DogInfo/index.vue

@@ -81,7 +81,6 @@ export default class DogInfo extends BaseVue {
   @Prop() private dog: DogData;
 
   play(): void {
-    console.log("aaa", this.dog);
     this.$emit("play", this.dog);
   }
 }

src/components/MyVideo/index.vue

 <template>
   <video id="najiu-player" class="video-js" muted preload="auto">
-    <source :src="videoUrl" type="video/mp4" />
+    <source ref="videoSource" :src="videoUrl" type="video/mp4" />
     <p class="vjs-no-js">当前浏览器不支持视频播放</p>
   </video>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+import { Component, Vue, Prop } from "vue-property-decorator";
 import "video.js/dist/video-js.min.css";
 import videojs from "video.js";
 import "@/components/MyVideo/track/index";
@@ -33,11 +33,30 @@ export default class MyVideo extends Vue {
           controls: true,
           autoplay: true,
           width: this.width,
+          controlBar: {
+            children: [
+              { name: "playToggle" },
+              { name: "volumePanel" },
+              { name: "currentTimeDisplay" },
+              { name: "timeDivider" },
+              { name: "progressControl" },
+              { name: "liveDisplay" },
+              { name: "durationDisplay" },
+              { name: "seekToLive" },
+              { name: "remainingTimeDisplay" },
+              { name: "customControlSpacer" },
+              { name: "playbackRateMenuButton" },
+              { name: "chaptersButton" },
+              { name: "descriptionsButton" },
+              { name: "subsCapsButton" },
+              { name: "audioTrackButton" },
+              { name: "fullscreenToggle" },
+            ],
+          },
         },
         function onPlayerReady() {
           //@ts-ignore
           this.addChild("DogTrack");
-          console.log("**", _this.trackData);
           _this.dogTrack = this.getChild("DogTrack");
           _this.dogTrack.initData(_this.trackData);
           this.play();
@@ -48,12 +67,13 @@ export default class MyVideo extends Vue {
     this.$emit("play");
   }
 
-  @Watch("src")
-  onSrcChange(newValue: string, oldValue: string) {
-    if (oldValue === newValue) return;
-    this.dogTrack.initData(this.trackData);
-    this.videoUrl = newValue;
-    this.player.src(newValue);
+  onSrcChange(videoSrc: string, trackData: TrackData[]) {
+    this.dogTrack.initData(trackData);
+    this.videoUrl = videoSrc;
+    //@ts-ignore
+    this.$refs["videoSource"].src = videoSrc;
+    console.log("aaa", this.$refs["videoSource"]);
+    this.player.src(videoSrc);
     this.player.play();
   }
 

src/components/MyVideo/track/index.ts

@@ -4,17 +4,26 @@ import { TrackData } from "../data"
 const Component = videojs.getComponent('Component');
 
 class DogTrack extends Component {
+  trackData = [] //传入初始数组
+  processing = false//是否在处理中
+  myel = undefined
+  defaultWidth = 0
+  defaultHeight = 0
+  defaultElWidth = ""
+  defaultElHeight = ""
 
   constructor(player, options) {
     super(player, options);
+    const this_ = this
+    //player 默认宽高
+    this.defaultWidth = player.el_.offsetWidth
+    this.defaultHeight = player.el_.offsetHeight
+
     player.on("timeupdate", (e) => this.update(e))
+    player.on("fullscreenchange", (e) => this.fullScreenChange.call(this_, e, player))
   }
 
-  trackData = [] //传入初始数组
-  trackingData = []//正在跟踪的数组
-  trackedData = []//已经被跟踪过的数组
-  processing = false//是否在处理中
-  myel = undefined
+
 
   createEl(): HTMLDivElement {
     const el = document.createElement("div")
@@ -23,16 +32,25 @@ class DogTrack extends Component {
     return el;
   }
 
+  fullScreenChange(e, player) {
+    if (player.isFullscreen()) {
+      this.myel.style.width = `${this.myel.offsetWidth * (e.currentTarget.offsetWidth / this.defaultWidth)}px`
+      this.myel.style.height = `${this.myel.offsetHeight * (e.currentTarget.offsetHeight / this.defaultHeight)}px`
+    } else {
+      this.myel.style.width = this.defaultElWidth
+      this.myel.style.height = this.defaultElHeight
+    }
+  }
+
   update(e) {
-    if (this.processing || this.trackingData.length === 0 || !this.myel) return
+    if (this.processing || this.trackData.length === 0 || !this.myel) return
     this.processing = true
     const currentTime = this.player_.currentTime() * 1000
-    for (let i = 0; i < this.trackingData.length; i++) {
-      const d = this.trackingData[i]
+    for (let i = 0; i < this.trackData.length; i++) {
+      const d = this.trackData[i]
       if (currentTime > d.beginTime && currentTime < d.endTime) {
         this.myel.style.top = `${d.position.top}%`
         this.myel.style.left = `${d.position.left}%`
-        this.trackedData.push(...this.trackingData.splice(0, i + 1))
         break;
       }
     }
@@ -40,26 +58,23 @@ class DogTrack extends Component {
   }
 
   initData(data: TrackData[]) {
+    this.trackData.length = 0
+    if (!data || data.length === 0) return;
     this.myel = document.getElementById("trackDiv")
-    if (!data || data.length === 0) {
-      this.trackData = []
-      return
-    }
-    let pre;
-    this.trackData = data.map((d: TrackData) => {
-      if (!pre) {
-        d.beginTime = 0;
-        d.endTime = d.time;
+    this.myel.style.width = `${data[0].shape.width}px`
+    this.myel.style.height = `${data[0].shape.height}px`
+    this.defaultElHeight = this.myel.style.height
+    this.defaultElWidth = this.myel.style.width
+
+    for (let i = 0; i < data.length; i++) {
+      const d = data[i]
+      if (i === data.length - 1) {
+        this.trackData.push({ ...d, beginTime: d.time, endTime: Number.MAX_SAFE_INTEGER })
       } else {
-        d.beginTime = pre.endTime;
-        d.endTime = d.time
+        this.trackData.push({ ...d, beginTime: d.time, endTime: data[i + 1].time })
       }
-      pre = d
-      this.trackingData.push(d)
-      return d
-    })
-
-    console.log("data", this.trackData, this.trackingData)
+    }
+    console.log("data", this.trackData)
   }
 
 

src/mock/cameraData.ts

@@ -35,14 +35,17 @@ export default {
       hairColor: "黑白相间",
       picture:
         "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u283.png",
-      videoUrl: "http://skynet-test.inajiu.com:7011/sn-web/video/video",
+      videoUrl: "http://skynet-test.inajiu.com:7011/sn-web/video/video?a=abc.mp4",
       trackData: [
+        { time: 0, position: { top: 0, left: 0 }, shape: { width: 45, height: 95 } },
         { time: 500, position: { top: 15, left: 15 }, shape: { width: 45, height: 95 } },
         { time: 1000, position: { top: 20, left: 20 }, shape: { width: 45, height: 95 } },
         { time: 1500, position: { top: 25, left: 25 }, shape: { width: 45, height: 95 } },
         { time: 2000, position: { top: 30, left: 30 }, shape: { width: 45, height: 95 } },
         { time: 2500, position: { top: 35, left: 35 }, shape: { width: 45, height: 95 } },
         { time: 3000, position: { top: 40, left: 40 }, shape: { width: 45, height: 95 } },
+        { time: 15000, position: { top: 45, left: 45 }, shape: { width: 45, height: 95 } },
+        { time: 20000, position: { top: 50, left: 50 }, shape: { width: 45, height: 95 } },
       ]
     },
     {
@@ -58,12 +61,15 @@ export default {
 
       videoUrl: "//vjs.zencdn.net/v/oceans.mp4",
       trackData: [
+        { time: 0, position: { top: 0, left: 0 }, shape: { width: 45, height: 95 } },
         { time: 500, position: { top: 15, left: 15 }, shape: { width: 45, height: 95 } },
         { time: 1000, position: { top: 20, left: 20 }, shape: { width: 45, height: 95 } },
         { time: 1500, position: { top: 25, left: 25 }, shape: { width: 45, height: 95 } },
         { time: 2000, position: { top: 30, left: 30 }, shape: { width: 45, height: 95 } },
         { time: 2500, position: { top: 35, left: 35 }, shape: { width: 45, height: 95 } },
         { time: 3000, position: { top: 40, left: 40 }, shape: { width: 45, height: 95 } },
+        { time: 15000, position: { top: 45, left: 45 }, shape: { width: 45, height: 95 } },
+        { time: 20000, position: { top: 50, left: 50 }, shape: { width: 45, height: 95 } },
       ]
     },
     {
@@ -76,7 +82,10 @@ export default {
       hairColor: "黑色",
       picture:
         "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u319.png",
-      videoUrl: "//vjs.zencdn.net/v/oceans.mp4"
+      videoUrl: "//vjs.zencdn.net/v/oceans.mp4",
+      trackData: [
+        { time: 0, position: { top: 20, left: 20 }, shape: { width: 45, height: 95 } },
+      ]
     },
     {
       id: 4,
@@ -88,7 +97,7 @@ export default {
       hairColor: "黑色",
       picture:
         "http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u337.png",
-      videoUrl: "http://skynet-test.inajiu.com:7011/sn-web/video/video"
+      videoUrl: "http://skynet-test.inajiu.com:7011/sn-web/video/video?a=abc.mp4"
     },
     {
       id: 5,

src/views/dashboard/index.vue

@@ -11,7 +11,13 @@
       </div>
     </div>
     <div class="player" ref="player-container">
-      <MyVideo v-if="width > 0 && videoUrl" :src="videoUrl" :trackData="trackData" :width="width" />
+      <MyVideo
+        ref="myVideo"
+        v-if="width > 0 && videoUrl"
+        :src="videoUrl"
+        :trackData="trackData"
+        :width="width"
+      />
     </div>
     <div class="video-list">
       <div class="title">犬只记录</div>
@@ -60,7 +66,8 @@ export default class Dashboard extends BaseVue {
   handlePlay(dog: DogData): void {
     this.videoUrl = dog.videoUrl;
     this.trackData = dog.trackData;
-    console.log("dog", this.videoUrl, this.trackData);
+    //@ts-ignore
+    this.$refs["myVideo"].onSrcChange(this.videoUrl, this.trackData);
   }
 }
 </script>