播放器适配屏幕

src/assets/scss/myVideo.scss

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

src/components/MyVideo/index.vue

@@ -39,6 +39,7 @@ export default class MyVideo extends Vue {
           autoplay: true,
           width: this.width,
           language: "zh-CN",
+          fluid: true,
           controlBar: {
             children: [
               { name: "playToggle" },
@@ -61,9 +62,9 @@ export default class MyVideo extends Vue {
           },
         },
         function onPlayerReady() {
-          const myContainer = this.addChild("MyContainer");
-          myContainer.addChild("DogTrack");
-          _this.dogTrack = myContainer.getChild("DogTrack");
+          // const myContainer = this.addChild("MyContainer");
+          this.addChild("DogTrack");
+          _this.dogTrack = this.getChild("DogTrack");
           this.play();
         }
       );

src/components/MyVideo/track/index.ts

@@ -6,10 +6,6 @@ class DogTrack extends Component {
   trackData = [] //传入初始数组
   dogDiv = new Map()
   processing = false//是否在处理中
-  defaultWidth = 0
-  defaultHeight = 0
-  fullWidth = 0
-  fullHeight = 0
   firstShowTrack = false
   isReplaceDisplayNone = false
   arrayIndex = 0
@@ -18,9 +14,6 @@ class DogTrack extends Component {
   constructor(player, options) {
     super(player, options);
     const this_ = this
-    //player 默认宽高
-    this.defaultWidth = player.el_.offsetWidth
-    this.defaultHeight = player.el_.offsetHeight
 
     player.on("loadedmetadata", () => {
       console.log("视频时长单位秒", player.duration())
@@ -30,12 +23,18 @@ class DogTrack extends Component {
     player.on("ended", () => {
       this.arrayIndex = 0;
     })
+    player.on("playerresize", (e) => {
+      // this.defaultHeight = player.currentHeight()
+      // this.defaultWidth = player.currentWidth()
+      // console.log("aaa", player.currentHeight(), player.currentWidth())
+    })
   }
 
   fullScreenChange(e, player) {
     if (player.isFullscreen()) {
-      this.fullWidth = e.currentTarget.offsetWidth
-      this.fullHeight = e.currentTarget.offsetHeight
+      // this.fullWidth = e.currentTarget.offsetWidth
+      // this.fullHeight = e.currentTarget.offsetHeight
+      console.log("full", e.currentTarget.offsetWidth, e.currentTarget.offsetHeight)
     }
   }
 
@@ -76,19 +75,19 @@ class DogTrack extends Component {
       const myel = this.dogDiv.get(key)
       if (!this.player_.isFullscreen()) {
         //跟踪框大小
-        myel.style.width = `${(value.x2 - value.x1) * this.defaultWidth}px`
-        myel.style.height = `${(value.y2 - value.y1) * (this.defaultHeight + 30)}px`
+        myel.style.width = `${(value.x2 - value.x1) * this.player_.currentWidth()}px`
+        myel.style.height = `${(value.y2 - value.y1) * (this.player_.currentHeight() + 30)}px`
         //跟踪框位置
-        myel.style.top = `${value.y1 * this.defaultHeight}px`
-        myel.style.left = `${value.x1 * this.defaultWidth}px`
-        // console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.defaultWidth},screen-height:${this.defaultHeight},dogs:${JSON.stringify(value)}`)
+        myel.style.top = `${value.y1 * this.player_.currentHeight()}px`
+        myel.style.left = `${value.x1 * this.player_.currentWidth()}px`
+        console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.player_.currentWidth()},screen-height:${this.player_.currentHeight()},dogs:${JSON.stringify(value)}`)
       } else {
-        myel.style.width = `${(value.x2 - value.x1) * this.fullWidth}px`
-        myel.style.height = `${(value.y2 - value.y1) * (this.fullHeight + 30)}px`
+        myel.style.width = `${(value.x2 - value.x1) * this.player_.currentWidth()}px`
+        myel.style.height = `${(value.y2 - value.y1) * (this.player_.currentHeight() + 30)}px`
         //跟踪框位置
-        myel.style.top = `${value.y1 * this.fullHeight}px`
-        myel.style.left = `${value.x1 * this.fullWidth}px`
-        // console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.defaultWidth},screen-height:${this.defaultHeight},dogs:${dogs}`)
+        myel.style.top = `${value.y1 * this.player_.currentHeight()}px`
+        myel.style.left = `${value.x1 * this.player_.currentWidth()}px`
+        console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.player_.currentWidth()},screen-height:${this.player_.currentHeight()},dogs:${JSON.stringify(value)}`)
       }
 
       myel.className = myel.className.replace(/display-none/ig, "")
@@ -125,8 +124,8 @@ class DogTrack extends Component {
   createDogDiv(dogIds: any, currentDogId: string) {
     if (!dogIds || dogIds.size === 0) return;
     //@ts-ignore
-    const myContainer = this.player_.getChild("MyContainer").el_;
-    // console.log("key currentDogId", dogIds, currentDogId)
+    const myContainer = this.player_.el_;
+    console.log("key currentDogId", dogIds, currentDogId, myContainer)
     for (const key of dogIds.keys()) {
       const el = document.createElement("div")
       el.id = `dog_${key}`

src/views/dashboard/index.vue

@@ -22,7 +22,7 @@
         </div>
       </div>
     </div>
-    <div class="player" ref="player-container">
+    <div id="player-container" class="player" ref="player-container">
       <MyVideo ref="my-video" v-if="width > 0 && videoUrl" :src="videoUrl" :width="width" />
     </div>
     <div class="video-list">