全屏播放

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

@@ -6,14 +6,23 @@
     <v-tabs v-model="tab" color="#3666F2" background-color="transparent" style="height: 42px;">
       <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(item, ele)">
-            <video :id="'el-video-' + ele.id" class="w165h148" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" />
+        <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>
       </v-tabs-items>
     </v-tabs>
+    <div v-show="showVideo" class="videobox">
+      <div v-for="e in videoList" :key="e.plateId">
+        <video 
+          v-for="element in e.videoCourseList" :id="'el-video-' + element.id" :key="element.id" :class="element.isShow ? '' : 'hide'" controls :src="videoURL(element.videoKey)" preload="auto" webkit-playsinline="true"
+          playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:contain">
+        </video>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -27,7 +36,8 @@ export default {
       tab: null,
       videoList: [],
       topADList: [],
-      token: ''
+      token: '',
+      showVideo: false
     }
   },
   fetch() {
@@ -48,42 +58,41 @@ export default {
     async getActiveInfo() {
       const res = await this.$axios.$get('/activity/videoCourse/client/list');
       this.videoList = res.data;
+      res.data.forEach(item => {
+        item.videoCourseList.forEach(ele => {
+          ele.isShow = false
+        })
+      });
     },
     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) {
+    play(item, ele, index, idx) {
+      this.showVideo = true
+      this.videoList[index].videoCourseList[idx].isShow = true
       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()
-      }
+      elVideo.addEventListener("ended", () => {
+        elVideo.pause();
+        this.showVideo = false
+        this.videoList[index].videoCourseList[idx].isShow = false
+      });
       this.submit(item, ele, 1)
     },
     playAd(item) {
       this.submit(item, '', 2)
       if (item.actionType === '1' || item.actionType === '3' || item.actionType === '4' || item.actionType === '5' || item.actionType === '6') {
-        window.location.href = item.clickUrl
+        window.open('', '_blank', item.clickUrl)
       }
     },
     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/v5/advertising/getAdInfoByAdPlace', data, {headers: {Authorization: this.token}});
+      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 } });
     }
   }
 }
@@ -99,9 +108,33 @@ export default {
 </style>
 <style lang="scss" scoped>
 .bgFAFAFA {
-  background: #FAFAFA;
+  background: #fafafa;
 }
 @media (min-width: 0px) {
+  .hide {
+    display: none;
+  }
+  .videobox {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: #1c1c1e;
+    z-index: 2;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .videobox video {
+    height: 100vh;
+    width: 100vw;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 3;
+  }
   .video-card {
     width: 165px;
     height: 148px;
@@ -109,7 +142,8 @@ export default {
     position: relative;
     display: inline-block;
     margin-right: 30px;
-    &:nth-of-type(4n+0){
+    z-index: 1;
+    &:nth-of-type(4n + 0) {
       margin-right: 0px;
     }
     & .video-card-title {
@@ -119,7 +153,7 @@ export default {
       text-align: center;
       font-size: 14px;
       font-weight: 500;
-      color: #1C1C1E;
+      color: #1c1c1e;
       background: #fff;
       border-radius: 0 0 9px 9px;
       position: absolute;
@@ -143,7 +177,7 @@ export default {
     height: 120px;
     margin: 10px auto;
     display: block;
-    background: #FAFAFA;
+    background: #fafafa;
     border-radius: 5px;
   }
   .w165h148 {
@@ -152,7 +186,7 @@ export default {
     margin-bottom: 10px;
     margin-right: 30px;
     border-radius: 10px;
-    &:nth-of-type(4n+0){
+    &:nth-of-type(4n + 0) {
       margin-right: 0px;
     }
   }

pages/activity/invite-user/guide.vue

@@ -3,16 +3,23 @@
     <v-carousel :show-arrows="false" cycle interval="3000" height="120" hide-delimiter-background class="w345h120" delimiter-icon="mdi-minus">
       <v-carousel-item v-for="item in topADList" :key="item.id" :src="item.imgUrls[0]" @click="playAd(item)"></v-carousel-item>
     </v-carousel>
-    <div v-for="item in videoList" :key="item.plateId">
+    <div v-for="(item, index) in videoList" :key="item.plateId">
       <div class="fs16">{{item.plateName}}</div>
       <div :class="item.displayMode === 1 ? 'jcjc-list' : 'jjjc-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" 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 v-for="(ele, i) in item.videoCourseList" :key="ele.id" class="video-card">
+          <img 
+            class="w165h148" :src="videoURL(ele.coverImageKey)" @click="play(item, ele, index, i)" />
         </div>
       </div>
     </div>
-    <!-- <div class="return out"><div class="in"><img src="~/assets/image/activity/invite-user/guide/left.png" /></div></div> -->
+    <div v-show="showVideo" class="videobox">
+      <div v-for="e in videoList" :key="e.plateId">
+        <video
+          v-for="element in e.videoCourseList" :id="'el-video-' + element.id" :key="element.id" :class="element.isShow ? '' : 'hide'" controls :src="videoURL(element.videoKey)" preload="auto" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint"
+          style="object-fit:contain">
+        </video>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -25,7 +32,8 @@ export default {
     return {
       videoList: [],
       topADList: [],
-      token: ''
+      token: '',
+      showVideo: false
     }
   },
   async fetch() {
@@ -49,7 +57,12 @@ export default {
   methods: {
     async getActiveInfo() {
       const res = await this.$axios.$get('/activity/videoCourse/client/list');
-      this.videoList = res.data;
+      res.data.forEach(item => {
+        item.videoCourseList.forEach(ele => {
+          ele.isShow = false
+        })
+      });
+      this.videoList = res.data
     },
     async getAdInfoByAdPlace() {
       const data = {
@@ -60,50 +73,56 @@ export default {
       const res = await this.$axios.$post('/public/v5/advertising/getAdInfoByAdPlace', data);
       this.topADList = res.data;
     },
-    play(item, ele) {
+    play(item, ele, index, idx) {
+      this.showVideo = true
+      this.videoList[index].videoCourseList[idx].isShow = true
       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);
+      elVideo.addEventListener("ended", () => {
+        elVideo.pause();
+        this.showVideo = false
+        this.videoList[index].videoCourseList[idx].isShow = false
+      });
       this.submit(item, ele, 1)
     },
     playAd(item) {
       this.submit(item, '', 2)
       if (item.actionType === '1' || item.actionType === '3' || item.actionType === '4' || item.actionType === '5' || item.actionType === '6') {
-        window.location.href = item.clickUrl
+        window.open('', '_blank', item.clickUrl)
       }
     },
     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 } });
+      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}});
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.hide {
+  display: none;
+}
+.videobox {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: #1c1c1e;
+  z-index: 2;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.videobox video {
+  height: 100vh;
+  width: 100vw;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 3;
+}
 .video-player--is-cssfullscreen {
   position: fixed !important;
   left: 0 !important;
@@ -118,6 +137,7 @@ export default {
   border-radius: 5px;
   position: relative;
   margin-bottom: 10px;
+  z-index: 1;
   & .video-card-title {
     width: 100%;
     height: 45px;