全屏播放问题

package.json

@@ -38,6 +38,7 @@
     "normalize.css": "^8.0.1",
     "numeral": "^2.0.6",
     "nuxt": "^2.15.8",
+    "screenfull": "^6.0.2",
     "v-mask": "^2.3.0",
     "vant": "^2.12.47",
     "vconsole": "^3.14.6",

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

@@ -5,7 +5,7 @@
       <v-tab v-for="item in videoList" :key="item.plateId" style="height: 42px;">{{item.plateName}}</v-tab>
       <v-tabs-items v-model="tab">
         <v-tab-item v-for="item in videoList" :key="item.plateId" style="padding: 10px;background: #FAFAFA;min-height: calc(100vh - 162px);">
-          <div v-for="ele in item.videoCourseList" :key="ele.id" class="video-card" @click="play('el-video-' + ele.id)">
+          <div v-for="ele in item.videoCourseList" :key="ele.id" class="video-card" @click="play(item, ele)">
             <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>
           </div>

pages/activity/invite-user/guide.vue

@@ -15,6 +15,7 @@
 </template>
 
 <script>
+import screenfull from "screenfull"
 import { fileKeyToUrl } from '@/plugins/file-center.js';
 export default {
   name: 'Guide',
@@ -58,70 +59,39 @@ export default {
       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 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);
+      const elVideo = document.getElementById('el-video-' + ele.id)
+      if (this.$userAgent.isAndroid) {
+        if (screenfull.isEnabled) {
+          screenfull.request(elVideo);
+        }
+      } else {
+        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)
     },
     playAd(item, ele) {
@@ -147,6 +117,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.video-player--is-cssfullscreen {
+  position: fixed !important;
+  left: 0 !important;
+  top: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  z-index: 999;
+}
 .video-card {
   width: 165px;
   height: 148px;