实现在线版热力图

src/assets/scss/myVideo.scss

+.my-container {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 30px);
+  // border: 1px solid red;
+}
+
 .najiu-dog-track {
   position: absolute;
   top: 30px;

src/components/MyVideo/data.d.ts

 export interface TrackData {
-  time: number,
-  position: PostitionData,
-  shape: Shape,
-  videoShape?: VideoShape,
-  beginTime?: number,
-  endTime?: number
-}
-
-export interface PostitionData {
-  top: number,
-  left: number
-}
-
-export interface Shape {
-  width: number,
-  height: number
-}
-
-export interface VideoShape {
-  width: number,
-  height: number
+  DogId: string,
+  FrameIndex: numbner,
+  HasRope: boolean,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number
 }
\ No newline at end of file

src/components/MyVideo/index.vue

@@ -10,6 +10,7 @@ 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";
+import "@/components/MyVideo/myContainer/index";
 import "@/assets/scss/myVideo.scss";
 import { TrackData } from "./data";
 
@@ -55,9 +56,9 @@ export default class MyVideo extends Vue {
           },
         },
         function onPlayerReady() {
-          //@ts-ignore
-          this.addChild("DogTrack");
-          _this.dogTrack = this.getChild("DogTrack");
+          const myContainer = this.addChild("MyContainer");
+          myContainer.addChild("DogTrack");
+          _this.dogTrack = myContainer.getChild("DogTrack");
           _this.dogTrack.initData(_this.trackData);
           this.play();
         }

src/components/MyVideo/myContainer/index.ts

+import videojs from 'video.js'
+
+const Component = videojs.getComponent('Component');
+
+//实现自己的容器
+class MyContainer extends Component {
+  constructor(player, options) {
+    super(player, options)
+  }
+
+  createEl() {
+    const container = document.createElement("div")
+    container.classList.add("my-container")
+    container.onclick = () => {
+      //播放状态
+      if (this.player_.paused()) {
+        this.player_.play()
+      } else {
+        this.player_.pause()
+      }
+    }
+    container.oncontextmenu = function () {
+      console.log("鼠标右键")
+      return false
+    }
+
+    return container
+  }
+
+  handleClick(event) {
+    console.log("container", event)
+  }
+}
+
+videojs.registerComponent("MyContainer", MyContainer)
\ No newline at end of file

src/components/MyVideo/track/index.ts

@@ -9,9 +9,12 @@ class DogTrack extends Component {
   myel = undefined
   defaultWidth = 0
   defaultHeight = 0
-  defaultElWidth = ""
-  defaultElHeight = ""
+  fullWidth = 0
+  fullHeight = 0
   firstShowTrack = false
+  isReplaceDisplayNone = false
+  arrayIndex = 0
+  preCurrentTime = 0
 
   constructor(player, options) {
     super(player, options);
@@ -22,13 +25,11 @@ class DogTrack extends Component {
 
     player.on("timeupdate", (e) => this.update(e))
     player.on("fullscreenchange", (e) => this.fullScreenChange.call(this_, e, player))
-    player.on("ended", (e) => {
-      console.log("ended", e)
+    player.on("ended", () => {
+      this.arrayIndex = 0;
     })
   }
 
-
-
   createEl(): HTMLDivElement {
     const el = document.createElement("div")
     el.id = "trackDiv"
@@ -39,11 +40,8 @@ class DogTrack extends Component {
 
   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
+      this.fullWidth = e.currentTarget.offsetWidth
+      this.fullHeight = e.currentTarget.offsetHeight
     }
   }
 
@@ -51,12 +49,34 @@ class DogTrack extends Component {
     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.trackData.length; i++) {
+    //假如调整的播放时间则初始数组索引
+    if (currentTime - this.preCurrentTime <= 0) {
+      this.dispose()
+    }
+    //上次播放时间
+    this.preCurrentTime = currentTime
+    const firstFrameIndex = this.trackData[0].FrameIndex * 40
+    for (let i = this.arrayIndex; 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.myel.className = this.myel.className.replace(/display-none/ig, "")
+      if (firstFrameIndex <= currentTime && currentTime <= d.FrameIndex * 40) {
+        //
+        this.arrayIndex = i
+        console.log("arrayIndex", this.arrayIndex, d.FrameIndex)
+        if (!this.player_.isFullscreen()) {
+          //跟踪框大小
+          this.myel.style.width = `${(d.x2 - d.x1) * this.defaultWidth}px`
+          this.myel.style.height = `${(d.y2 - d.y1) * this.defaultHeight}px`
+        } else {
+          this.myel.style.width = `${(d.x2 - d.x1) * this.fullWidth}px`
+          this.myel.style.height = `${(d.y2 - d.y1) * this.fullHeight}px`
+        }
+        //跟踪框位置
+        this.myel.style.top = `${d.y1 * 100}%`
+        this.myel.style.left = `${d.x1 * 100}%`
+        if (!this.isReplaceDisplayNone) {
+          this.isReplaceDisplayNone = true
+          this.myel.className = this.myel.className.replace(/display-none/ig, "")
+        }
         break;
       }
     }
@@ -66,21 +86,19 @@ class DogTrack extends Component {
   initData(data: TrackData[]) {
     this.trackData.length = 0
     if (!data || data.length === 0) return;
+    this.trackData = data;
     this.myel = document.getElementById("trackDiv")
-    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
+    this.dispose()
+    const this_ = this
+    setTimeout(() => {
+      this.player_.currentTime((this_.trackData[0].FrameIndex * 40 - 30) / 1000)
+    }, 100);
+  }
 
-    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 {
-        this.trackData.push({ ...d, beginTime: d.time, endTime: data[i + 1].time })
-      }
-    }
-    console.log("data", this.trackData)
+  dispose() {
+    this.arrayIndex = 0
+    this.myel.classList.add("display-none")
+    this.isReplaceDisplayNone = false
   }
 
   hideTrackDiv() {

src/views/dashboard/index.vue

@@ -13,7 +13,7 @@
     <div class="player" ref="player-container">
       <MyVideo
         ref="myVideo"
-        v-if="width > 0 && videoUrl"
+        v-if="width > 0 && trackData.length > 0"
         :src="videoUrl"
         :trackData="trackData"
         :width="width"
@@ -39,7 +39,7 @@ import MyVideo from "@/components/MyVideo/index.vue";
 import CameraData from "@/mock/cameraData";
 import { DogData } from "@/components/DogInfo/data";
 import { TrackData } from "@/components/MyVideo/data";
-import cameraData from "@/mock/cameraData";
+import dogTrackData from "@/mock/trackData";
 
 @Component({ components: { Camera, DogInfo, Search, MyVideo } })
 export default class Dashboard extends BaseVue {
@@ -49,8 +49,11 @@ export default class Dashboard extends BaseVue {
   width = 0;
   height = 0;
   videoUrl = "";
-  trackData: TrackData[] = [];
+  trackData: TrackData[];
   mounted() {
+    this.trackData = dogTrackData.filter(
+      (d) => d.DogId === "1440845582095753223"
+    );
     this.$nextTick(() => {
       const p = this.$refs["player-container"];
       //@ts-ignore
@@ -59,13 +62,14 @@ export default class Dashboard extends BaseVue {
       this.height = p.offsetHeight;
       //todo:
       this.videoUrl = CameraData.dogData[0].videoUrl;
-      this.trackData = cameraData.dogData[0].trackData;
     });
   }
 
   handlePlay(dog: DogData): void {
     this.videoUrl = dog.videoUrl;
-    this.trackData = dog.trackData;
+    this.trackData = dogTrackData.filter(
+      (d) => d.DogId === "1440845582095753223"
+    );
     //@ts-ignore
     this.$refs["myVideo"].onSrcChange(this.videoUrl, this.trackData);
   }