文章详情

src/views/mobile/article/detail.vue

@@ -18,18 +18,21 @@
                 </div>
             </div>
             <div style="margin-top: .2rem;">
-                <video-player  class="video-player vjs-custom-skin"
-                               v-if="articleInfo.videoAudioType==1"
-                               ref="videoPlayer"
-                               :playsinline="playsinline"
-                               style="object-fit:fill"
-                               :options="playerOptions"
-                               :x5-video-player-fullscreen="true"
-                               @pause="onPlayerPause($event)"
-                               @play="onPlayerPlay($event)"
-                               @fullscreenchange="onFullscreenChange($event)"
-                               @ended="onPlayerEnded($event)"
-                ></video-player>
+                <div class="video-player" :class="[{'hiddeen': hide}]" ref="videoEl">
+                    <video-player  class="video-player vjs-custom-skin"
+                                   v-if="articleInfo.videoAudioType==1"
+                                   ref="videoPlayer"
+                                   :playsinline="playsinline"
+                                   style="object-fit:fill"
+                                   :options="playerOptions"
+                                   :x5-video-player-fullscreen="true"
+                                   @pause="onPlayerPause($event)"
+                                   @play="onPlayerPlay($event)"
+                                   @fullscreenchange="onFullscreenChange($event)"
+                                   @ended="onPlayerEnded($event)"
+                    ></video-player>
+                </div>
+
                 <audio v-if="articleInfo.videoAudioType==0" id="audioEle" :src="articleInfo.videoUrl" style="width: 100%;" controls="controls"></audio>
 
             </div>
@@ -280,7 +283,7 @@
                     fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                     sources: [{
                         type: "video/mp4",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
-                        src: this.src //url地址
+                        src: "" //url地址
                     }],
                     poster: "", //你的封面地址
                     // width: document.documentElement.clientWidth, //播放器宽度
@@ -292,6 +295,7 @@
                     //     fullscreenToggle: true  //全屏按钮
                     // }
                 },
+                hide:false
             }
         },
         methods:{
@@ -376,7 +380,7 @@
                 api.getArticleDetailById(this.$route.query.id,this.isAddBrowse).then((res)=>{
                     if(res.code==0){
                         this.articleInfo = res.result;
-                        this.playerOptions.poster = res.result.videoUrl;
+                        this.playerOptions.sources[0].src = res.result.videoUrl;
                         document.addEventListener("visibilitychange", () => {
                             if(document.hidden) {
                                 // 页面被挂起,暂停播放
@@ -843,37 +847,37 @@
 
             handleMore(){
                 this.$router.push("/articleList")
-            }
-
-        },
-        computed:{
-            playsinline(){
-                var ua = navigator.userAgent.toLocaleLowerCase();
-                //x5内核
-                if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
-                    return false
-                }else{
-                    //ios端
-                    return true
-                }
             },
 
             onPlayerPause(player){
-
+                this.hide = false;
             },
 
             onPlayerPlay(player){
-
+                this.hide = true;
 
             },
 
             onPlayerEnded(player){
-
+                this.hide = true;
             },
 
             onFullscreenChange(player){
             },
 
+        },
+        computed:{
+            playsinline(){
+                var ua = navigator.userAgent.toLocaleLowerCase();
+                //x5内核
+                if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
+                    return false
+                }else{
+                    //ios端
+                    return true
+                }
+            }
+
         },
         mounted(){
             this.getArticleDetail();