全屏播放退出

pages/activity/invite-user/guide-pc.vue

@@ -8,8 +8,6 @@
       <v-tabs-items v-model="tab">
         <v-tab-item v-for="(item, index) in videoList" :key="item.plateId" style="padding: 10px;background: #FAFAFA;min-height: calc(100vh - 162px);">
           <div v-for="(ele, i) in item.videoCourseList" :key="ele.id" class="video-card">
-            <!-- <video :id="'el-video-' + ele.id" class="w165h148" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" /> -->
-            <!-- <div class="video-card-title">{{ele.videoName}}</div> -->
             <img class="w165h148" :src="videoURL(ele.coverImageKey)" @click="play(item, ele, index, i)" />
           </div>
         </v-tab-item>
@@ -23,6 +21,7 @@
         </video>
       </div>
     </div>
+    <img v-if="showVideo" class="wh24" src="~/assets/image/activity/invite-user/guide/Union.png" alt="" @click="close">
   </div>
 </template>
 
@@ -37,7 +36,9 @@ export default {
       videoList: [],
       topADList: [],
       token: '',
-      showVideo: false
+      showVideo: false,
+      index: 0,
+      idx: 0
     }
   },
   fetch() {
@@ -55,6 +56,12 @@ export default {
     this.getAdInfoByAdPlace()
   },
   methods: {
+    close() {
+      this.showVideo = false
+      this.videoList[this.index].videoCourseList[this.idx].isShow = false
+      const elVideo = document.getElementById('el-video-' + this.videoList[this.index].videoCourseList[this.idx].id)
+      elVideo.pause()
+    },
     async getActiveInfo() {
       const res = await this.$axios.$get('/activity/videoCourse/client/list');
       this.videoList = res.data;
@@ -76,13 +83,17 @@ export default {
     play(item, ele, index, idx) {
       this.showVideo = true
       this.videoList[index].videoCourseList[idx].isShow = true
+      this.index = index
+      this.idx = idx
       const elVideo = document.getElementById('el-video-' + ele.id)
       elVideo.addEventListener("ended", () => {
         elVideo.pause();
         this.showVideo = false
         this.videoList[index].videoCourseList[idx].isShow = false
       });
-      this.submit(item, ele, 1)
+      elVideo.addEventListener("play", () => {
+        this.submit(item, ele, 1)
+      });
     },
     playAd(item) {
       this.submit(item, '', 2)
@@ -92,7 +103,7 @@ export default {
     },
     submit(item, ele, flag) {
       const data = flag === 1 ? { id: ele.id, plateId: item.plateId, type: flag, videoId: ele.id } : { type: 2, adId: item.id, adName: item.title }
-      this.$axios.$post('/activity/v5/advertising/getAdInfoByAdPlace', data, { headers: { Authorization: this.token } });
+      this.$axios.$post('/activity/videoCourse/statistics/save', data, { headers: { Authorization: this.token } });
     }
   }
 }
@@ -111,6 +122,14 @@ export default {
   background: #fafafa;
 }
 @media (min-width: 0px) {
+  .wh24 {
+    width: 24px;
+    height: 24px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+    z-index: 4;
+  }
   .hide {
     display: none;
   }

pages/activity/invite-user/guide.vue

@@ -20,6 +20,7 @@
         </video>
       </div>
     </div>
+    <img v-if="showVideo" class="wh24" src="~/assets/image/activity/invite-user/guide/Union.png" alt="" @click="close">
   </div>
 </template>
 
@@ -33,7 +34,9 @@ export default {
       videoList: [],
       topADList: [],
       token: '',
-      showVideo: false
+      showVideo: false,
+      index: 0,
+      idx: 0
     }
   },
   async fetch() {
@@ -55,6 +58,12 @@ export default {
     this.getAdInfoByAdPlace()
   },
   methods: {
+    close() {
+      this.showVideo = false
+      this.videoList[this.index].videoCourseList[this.idx].isShow = false
+      const elVideo = document.getElementById('el-video-' + this.videoList[this.index].videoCourseList[this.idx].id)
+      elVideo.pause()
+    },
     async getActiveInfo() {
       const res = await this.$axios.$get('/activity/videoCourse/client/list');
       res.data.forEach(item => {
@@ -76,13 +85,17 @@ export default {
     play(item, ele, index, idx) {
       this.showVideo = true
       this.videoList[index].videoCourseList[idx].isShow = true
+      this.index = index
+      this.idx = idx
       const elVideo = document.getElementById('el-video-' + ele.id)
       elVideo.addEventListener("ended", () => {
         elVideo.pause();
         this.showVideo = false
         this.videoList[index].videoCourseList[idx].isShow = false
       });
-      this.submit(item, ele, 1)
+      elVideo.addEventListener("play", () => {
+        this.submit(item, ele, 1)
+      });
     },
     playAd(item) {
       this.submit(item, '', 2)
@@ -92,7 +105,7 @@ export default {
     },
     submit(item, ele, flag) {
       const data = flag === 1 ? { id: ele.id, plateId: item.plateId, type: flag, videoId: ele.id } : { type: 2, adId: item.id, adName: item.title }
-      this.$axios.$post('/activity/v5/advertising/getAdInfoByAdPlace', data, {headers: {Authorization: this.token}});
+      this.$axios.$post('/activity/videoCourse/statistics/save', data, {headers: {Authorization: this.token}});
     }
   }
 }
@@ -108,15 +121,26 @@ export default {
   top: 0;
   right: 0;
   bottom: 0;
-  background: #1c1c1e;
+  background: #000;
   z-index: 2;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
 }
 
+.wh24 {
+  width: 24px;
+  height: 24px;
+  margin: 10px auto;
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  margin-left: -12px;
+  z-index: 4;
+}
+
 .videobox video {
-  height: 100vh;
+  height: calc(100vh - 44px);
   width: 100vw;
   position: absolute;
   left: 0;