视频组件问题

背景色问题

src/components/business/cell-list-detail-share.vue

@@ -167,6 +167,14 @@ export default {
     // 跳转到考试或课程 type 1: 考试;  2: 课程
     // 如果是考试，将根据appVersion判断是新考试还是老考试，如果是301或之前的，都是老考试
     gotoExamOrCourse(item) {
+      if(!isWeiXin()) {
+        if(item.type == 1) {
+          Toast('请前往云鹊医APP参加考试');
+        } else if(item.type == 2){
+          Toast('请前往云鹊医APP学习课程');
+        }        
+        return;
+      }
       if(!this.logged) {
         if(item.type == 1) {
           Toast('请前往云鹊医APP参加考试');

src/components/course/course-covers.vue

@@ -51,7 +51,7 @@ export default {
   flex-direction: column;
   width: 100%;
   height: 210px;
-  background: rgba(0, 0, 0, 0.8);
+  // background: rgba(0, 0, 0, 0.8);
   justify-content: center;
   align-content: center;
   .tips {

src/components/course/pica-video.vue

@@ -12,7 +12,7 @@
         playsinline
         x5-playsinline="true"
         x-webkit-airplay="allow"
-        x5-video-player-type="h5-page"
+        x5-video-player-type="h5"
         x5-video-player-fullscreen="false"
         mtt-playsinline="true"
         controlsList="nodownload"
@@ -56,11 +56,11 @@
       </div>
       <!-- 播放遮罩 -->
       <transition name="fade">
-        <div v-show="isPaused" class="cover cover-play" @click="togglePlay"></div>
+        <div v-show="logged && isPaused" class="cover cover-play" @click="togglePlay"></div>
       </transition>
       <!-- 播放错误 -->
       <transition name="fade">
-        <div v-show="showError" class="cover cover-error">
+        <div v-show="logged && showError" class="cover cover-error">
           <p>播放失败，请确认网络正常或重新进入页面</p>
         </div>
       </transition>
@@ -102,6 +102,10 @@ import { formatLeftTimeObj } from '@/utils';
 export default {
   name: 'pica-video',
   props: {
+    coverType: {
+      type: Number,
+      default: 0,
+    },
     download: {
       type: Function,
       default: () => {}
@@ -139,8 +143,10 @@ export default {
   },
   created() {
     this.vid = `video_${this._uid}`;
+    this.playTime = 0;
     const ua = navigator.userAgent;
-    this.isWechat = ua.match(/(MicroMessenger)\/([\d.]+)/);
+    // this.isWechat = ua.match(/(MicroMessenger)\/([\d.]+)/);
+    this.isAndroid = ua.match(/(Android);?[\s\/]+([\d.]+)?/);
   },
   mounted() {
     if (this.isWechat) {
@@ -172,15 +178,11 @@ export default {
       if (this.proved && this.player.currentTime >= this.proved) {
         return;
       }
+      this.player.style.display = 'block';
       if (isPaused) {
         this.player.play();
-        if (this.opts.proved > 0) {
-          this.showProved = true;
-          this.provedTimer && clearTimeout(this.provedTimer);
-          this.provedTimer = setTimeout(() => {
-            this.showProved = false;
-          }, 5000)
-        }
+        this.playTime++;
+        this.showProved = false;
       } else {
         this.player.pause();
       }
@@ -192,6 +194,7 @@ export default {
       if (!this.isWechat) {
         return;
       }
+      this.player.style.display = 'block';
       const { url = '', poster = '', proved = 0, history = 0, enable = true } = opts;
       this.loaded = false;
       this.player.src = url;
@@ -205,6 +208,7 @@ export default {
       this.opts = opts;
       this.currentTime = null;
       this.duration = null;
+      this.showProved = proved > 0;
       this.showReplay = false;
       if (this.showError) this.showError = false;
     },
@@ -217,15 +221,22 @@ export default {
         this.reportOnOff(2);
       }
       this.reportLeave();
+      if (this.playTime === 0) {
+        this.player.play();
+      }
       this.switchUrl(opts);
+      this.player.autoplay = true;
       if (!this.enable) {
         return;
       }
       const loop = () => {
         if (this.loaded) {
           this.player.play();
-          this.isPaused = false;
-          this.reportOnOff(1);
+          if (!this.player.paused) {
+            this.isPaused = false;
+            this.reportOnOff(1);
+            this.showProved = false;
+          }
           return null;
         } else {
           return setTimeout(() => {
@@ -237,11 +248,14 @@ export default {
     },
     // 重播
     onReplay() {
+      this.player.style.display = 'block';
       this.player.currentTime = 0;
       this.player.play();
       this.isPaused = false;
       this.reportOnOff(1);
-      this.$emit('onReplay')
+      this.$emit('onReplay');
+      this.showReplay = false;
+      this.provedOver = false;
     },
     // 加载完毕，获取总时长和音量。问题：移动端点击播放才会触发，且不一定会获取时长
     loadedMetaData() {
@@ -260,10 +274,14 @@ export default {
     },
     // 播放中
     onTimeUpdate(e) {
+      const { currentTime, duration } = e.target;
+      // 试看，且超过时间
+      if (this.proved && currentTime >= this.proved) {
+        this.provedEnd();
+      }
       if (this.provedOver) {
         return
       }
-      const { currentTime, duration } = e.target;
       if (currentTime) {
         this.playTime = this.formatTime(currentTime);
       }
@@ -275,10 +293,6 @@ export default {
       if (currentTime < 0.1 && !this.loaded) {
         this.loadedMetaData();
       }
-      // 试看，且超过时间
-      if (this.proved && currentTime >= this.proved) {
-        this.provedEnd();
-      }
     },
     // 设置进度条位置
     setBarPosition(percent, target) {
@@ -311,7 +325,9 @@ export default {
       this.setBarPosition(percent, 'progressBar');
       this.player.currentTime = percent * duration / 100;
       if (this.isPaused) {
+        this.player.style.display = 'block';
         this.player.play();
+        this.playTime++;
         this.isPaused = false;
         this.reportOnOff(1);
       }
@@ -360,18 +376,33 @@ export default {
     },
     // 试看结束
     provedEnd() {
-      this.provedOver = true;
       this.player.pause();
-      this.$emit('onVideoEnd', { type: 2 });
+      this.player.currentTime = this.proved;
+      if (this.isAndroid) {
+        this.player.style.display = 'none';
+      }
+      if (!this.provedOver) {
+        this.$emit('onVideoEnd', { type: 2 });
+        this.reportOnOff(2);
+      }
       this.finish = true;
       this.showReplay = true;
-      this.reportOnOff(2);
+      this.provedOver = true;
+      this.isFullScreen = false;
     },
     // 播放结束
     onEnded() {
       this.$emit('onVideoEnd', { type: 1 });
       this.finish = true;
+      if (this.isAndroid) {
+        this.player.style.display = 'none';
+      }
       this.reportOnOff(2);
+      this.$nextTick(() => {
+        if (this.coverType > 0 && this.coverType !== 13) {
+          this.isFullScreen = false;
+        }
+      })
     },
     onError() {
       if (this.url) {