全屏播放问题

pages/activity/invite-user/guide.vue

@@ -5,7 +5,7 @@
       <div class="fs16">{{item.plateName}}</div>
       <div :class="item.displayMode === 1 ? 'jjjc-list' : 'jcjc-list'">
         <div v-for="ele in item.videoCourseList" :key="ele.id" class="video-card">
-          <video :id="'el-video-' + ele.id" class="w165h148" :x5-video-player-fullscreen="true" x5-video-player-type="h5" x5-video-orientation="landscape|portrait" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" @click="play(item, ele)" />
+          <video :id="'el-video-' + ele.id" class="w165h148" :x5-video-player-fullscreen="true" x5-video-player-type="h5" style="object-fit:fill" x5-video-orientation="landscape|portrait" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" @click="play(item, ele)" />
           <div class="video-card-title">{{ele.videoName}}</div>
         </div>
       </div>
@@ -51,28 +51,77 @@ export default {
     },
     async getAdInfoByAdPlace() {
       const data = {
-          id: 1,
-          adPlace: 20,
-          os: 1
-        }
+        id: 1,
+        adPlace: 20,
+        os: 1
+      }
       const res = await this.$axios.$post('/public/v5/advertising/getAdInfoByAdPlace', data);
       this.topADList = res.data;
     },
+    // play(item, ele) {
+    //   const elVideo = document.getElementById('el-video-' + ele.id)
+    //   if (elVideo.requestFullscreen) {
+    //     elVideo.requestFullscreen()
+    //     elVideo.play()
+    //   } else if (elVideo.mozRequestFullscreen) {
+    //     elVideo.mozRequestFullscreen()
+    //     elVideo.play()
+    //   } else if (elVideo.msRequestFullscreen) {
+    //     elVideo.msRequestFullscreen()
+    //     elVideo.play()
+    //   } else if (elVideo.webkitRequestFullscreen) {
+    //     elVideo.webkitRequestFullscreen()
+    //     elVideo.play()
+    //   } else {
+    //     elVideo.requestFullscreen()
+    //     elVideo.play()
+    //   }
+    //   elVideo.addEventListener("webkitfullscreenchange", function (e) {
+    //     if (!document.webkitIsFullScreen) {// 退出全屏暂停视频
+    //       elVideo.pause();
+    //     };
+    //   }, false);
+
+    //   elVideo.addEventListener('ended', function () {
+    //     document.webkitCancelFullScreen(); // 播放完毕自动退出全屏
+    //   }, false);
+    //   this.submit(item, ele, 1)
+    // },
+    fullscreen(elem) {
+      const prefix = 'webkit';
+      if (elem[prefix + 'EnterFullScreen']) {
+        return prefix + 'EnterFullScreen';
+      } else if (elem[prefix + 'RequestFullScreen']) {
+        return prefix + 'RequestFullScreen';
+      };
+      return false;
+    },
     play(item, ele) {
-      const elVideo = document.getElementById('el-video-' + ele.id)
-      if (elVideo.requestFullscreen) {
-        elVideo.requestFullscreen()
-        elVideo.play()
-      } else if (elVideo.mozRequestFullscreen) {
-        elVideo.mozRequestFullscreen()
-        elVideo.play()
-      } else if (elVideo.webkitRequestFullscreen) {
-        elVideo.webkitRequestFullscreen()
-        elVideo.play()
-      } else {
-        elVideo.requestFullscreen()
-        elVideo.play()
-      }
+      // const ua = navigator.userAgent.toLowerCase();
+      // const Android = String(ua.match(/android/i)) == "android";
+      // if(!Android) return;//非android系统不使用;
+      const video = document.getElementById('el-video-' + ele.id);
+      const doc = document;
+      const fullscreenvideo = this.fullscreen(doc.createElement("video"));
+      // if (!fullscreen) {
+      //   alert("不支持全屏模式");
+      //   return;
+      // }
+      video.addEventListener("webkitfullscreenchange", function (e) {
+        if (!doc.webkitIsFullScreen) {// 退出全屏暂停视频
+          this.pause();
+          // this.pause();
+        };
+      }, false);
+      video.addEventListener("click", function () {
+        this.play();
+        video[fullscreenvideo]();
+      }, false);
+
+
+      video.addEventListener('ended', function () {
+        doc.webkitCancelFullScreen(); // 播放完毕自动退出全屏
+      }, false);
       this.submit(item, ele, 1)
     },
     playAd(item, ele) {
@@ -91,7 +140,7 @@ export default {
     },
     submit(item, ele, flag) {
       const data = flag === 1 ? { id: ele.id, plateId: item.plateId, type: flag, videoId: ele.id } : { type: 2 }
-      this.$axios.$post('/activity/videoCourse/statistics/save', data, {headers: {Authorization: this.token}});
+      this.$axios.$post('/activity/videoCourse/statistics/save', data, { headers: { Authorization: this.token } });
     }
   }
 }
@@ -110,7 +159,7 @@ export default {
     text-align: center;
     font-size: 14px;
     font-weight: 500;
-    color: #1C1C1E;
+    color: #1c1c1e;
     background: #fff;
     position: absolute;
     left: 0;
@@ -119,7 +168,7 @@ export default {
   }
 }
 .bg2C2C2D {
-  background-color: #1C1C1E;
+  background-color: #1c1c1e;
   min-height: 100vh;
   overflow: hidden;
 }
@@ -188,19 +237,23 @@ export default {
   &.out {
     border-radius: 50%;
     padding: 1px;
-    background: linear-gradient(46deg, rgba(48, 49, 53, 1), rgba(113, 116, 127, 1));
-    box-shadow: 0px 9px 17px 0px rgba(0,0,0,0.5);
+    background: linear-gradient(
+      46deg,
+      rgba(48, 49, 53, 1),
+      rgba(113, 116, 127, 1)
+    );
+    box-shadow: 0px 9px 17px 0px rgba(0, 0, 0, 0.5);
   }
   .in {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background: linear-gradient(180deg, #232427 0%, #4B4C52 100%);
+    background: linear-gradient(180deg, #232427 0%, #4b4c52 100%);
     opacity: 1;
     text-align: center;
     line-height: 40px;
   }
-  
+
   img {
     width: 16px;
     height: 16px;