build

components/video-player/video-player.vue

@@ -1,10 +1,13 @@
 <template>
   <view>
-	<view v-if="!xvideoBool || xvideoBool&&drag" id="xvideoPlayer-box" :class="fullScreenFlag?'video-box video-full-screen':'video-box'">
+    <view v-if="!xvideoBool || xvideoBool&&drag" id="xvideoPlayer-box"
+          :class="fullScreenFlag?'video-box video-full-screen':'video-box'">
       <!-- <div style="color:#ffffff">{{currtimeText}}</div> -->
       <!--webkit-playsinline playsinline x5-video-player-type="h5-page-->
       <!-- :src="url" <video id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageWidth/videoPageHeight*256)+'px':'','top':fullScreenFlag?videoPageHeight/2+'px':''}" -->
-		<video  id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2+'px':''}"
+      <video id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''"
+             :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2+'px':''}"
+             ref="videoPlayer"
              :src="url"
              :controls="false"
              :enable-play-gesture="false"
@@ -24,7 +27,8 @@
       </video>
       <view id="xplayer-control">
         <!-- <view class="process-container" v-if="contrlShow" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%','margin-left':fullScreenFlag?'-320px':'','top':fullScreenFlag?'300px':videoFullHeight + 'px'}"> -->
-			<view class="process-container" v-if="contrlShow" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight*0.98+'px':'96%','margin-top':-1*videoPageHeight*0.02+'px','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2-174 - (videoPageWidth-375)/2+'px':'','bottom':fullScreenFlag?'auto':'0px'}">
+        <view class="process-container" v-if="contrlShow" :class="fullScreenFlag?'video-scree-rotate':''"
+              :style="{width: fullScreenFlag?videoPageHeight*0.98+'px':'96%','margin-top':-1*videoPageHeight*0.02+'px','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2-174 - (videoPageWidth-375)/2+'px':'','bottom':fullScreenFlag?'auto':'0px'}">
           <view class="controller-play">
             <image :src="require(playing? './images/pause.png':'./images/play.png')" @click.stop='videoOpreation'/>
           </view>
@@ -76,7 +80,9 @@
     </view>
     <view v-if="xvideoBool && !drag" class="video-box-error">
       <view style="color: #ffffff;padding: 0px 50px 0px;font-size: 16px;">{{ mobileVideoDragText }}</view>
-		<button style="display: inline-block;font-size: 14px;padding: 0px 10px;line-height: 28px;" v-if="mobileVideoDragSwitch == 'true'" @click="xvideoBoolFun">仍要使用此浏览器观看</button>
+      <button style="display: inline-block;font-size: 14px;padding: 0px 10px;line-height: 28px;"
+              v-if="mobileVideoDragSwitch == 'true'" @click="xvideoBoolFun">仍要使用此浏览器观看
+      </button>
     </view>
   </view>
 </template>
@@ -85,6 +91,7 @@
 import {mapGetters} from 'vuex'
 import studyUtil from '@/utils/study.js';
 import apiManage from '@/api/manage/manage.js';
+
 // getDictCode
 function agentFullScreen() {
   let bool = false
@@ -94,6 +101,7 @@
   }
   return bool
 }
+
 //alert(navigator.userAgent +'----'+ agentFullScreen())
 export default {
   components: {progressBar},
@@ -272,8 +280,11 @@
     },
     // 全屏+退出全屏
     fullScreen() {
-          console.log( "full screen")
-          this.$listeners['fullscreenchange'](this.fullScreenFlag)
+      const u = navigator.userAgent, app = navigator.appVersion;
+      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+      if (isIOS) {
+        this.$refs["videoPlayer"].webkitEnterFullscreen()
+      }
       var _this = this
       if (this.fullScreenFlag) {
         //this.videoContext.exitFullScreen();
@@ -290,6 +301,7 @@
       } else {
         //this.videoContext.requestFullScreen();
         this.fullScreenFlag = true;
+
         if (document.documentElement.requestFullscreen) {
           // document.documentElement.requestFullscreen();
         } else {
@@ -302,6 +314,8 @@
           }
         });
       }
+      console.log("full screen")
+      !isIOS && this.$listeners['fullscreenchange'](this.fullScreenFlag)
     },
     // // 全屏模式下，横屏+竖屏
     // horizontalScreen(){
@@ -373,7 +387,6 @@
       // }
 
 
-
       if (this.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
         this.sliderValue = sliderValue;
       } else {
@@ -580,6 +593,7 @@
   height: 100%;
   position: relative;
 }
+
 .video-box-error {
   width: 100%;
   height: 110px;
@@ -590,6 +604,7 @@
   align-items: center;
   flex-wrap: wrap;
 }
+
 .video-full-screen {
   position: fixed;
   width: 100vw;
@@ -599,18 +614,22 @@
   display: flex;
   align-items: center;
 }
+
 .video-scree-rotate {
   transform: rotate(90deg);
   // width: 100vw;
   // height: 100vh;
   position: fixed;
 }
+
 .screen {
   position: relative;
 }
+
 .screen-full {
   position: static;
 }
+
 .process-container {
   width: 100%;
   padding: 1% 2% 1% 2%;
@@ -626,11 +645,13 @@
   align-items: center;
   background: rgba(59, 57, 57, 0.2);
 }
+
 .process-container image {
   max-width: 30rpx;
   max-height: 30rpx;
   text-align: center;
 }
+
 .slider-container {
   z-index: 13;
   height: 60rpx;
@@ -638,15 +659,19 @@
   flex: 6;
   max-width: 50%;
 }
+
 .slider-container.new-bar {
   margin: 7px 10px 10px 10px;
 }
+
 .controller-play {
   width: 8%;
 }
+
 .controller-screen {
   // width: 10%;
 }
+
 .currtime {
   color: #ffffff;
   font-size: 22rpx;
@@ -655,6 +680,7 @@
   line-height: 60rpx;
   text-align: center;
 }
+
 .druationTime {
   color: #ffffff;
   font-size: 22rpx;
@@ -663,6 +689,7 @@
   line-height: 60rpx;
   text-align: center;
 }
+
 .player-speed {
   position: relative;
   color: #e5e5e5;
@@ -670,15 +697,18 @@
   transition: color 0.3s;
   height: 22px;
 }
+
 .btn-speed:hover .speed-control {
   // visibility: visible;
 }
+
 .speed-control {
   position: absolute;
   //top: 180px;
   transition: visibility 0.3s;
   transform: translate(-50%, -100%);
 }
+
 .speed-control .speed-control-list {
   list-style: none;
   color: #e5e5e5;
@@ -691,16 +721,19 @@
   border-radius: 4px;
   background: rgba(21, 21, 21, 0.8);
 }
+
 .speed-control .speed-control-list .li {
   position: relative;
   display: block;
   height: 25px;
   line-height: 25px;
 }
+
 .speed-control .speed-control-list .li:hover {
   color: #fff;
   background: rgba(99, 99, 99, 0.8);
 }
+
 .speed-control .speed-control-list .li.current {
   color: var(--primaryColor);
 }

unpackage/dist/build/h5/index.html

@@ -19,4 +19,4 @@
 	    hm.src = "https://hm.baidu.com/hm.js?ea89f02dca369037a73c5e3907e2c14a";
 	    var s = document.getElementsByTagName("script")[0];
 	    s.parentNode.insertBefore(hm, s);
-	  })();</script></head><body><div id=app></div><script src=/mobile/static/js/chunk-vendors.b01deae1.js></script><script src=/mobile/static/js/index.e1d59393.js></script></body></html>
+	  })();</script></head><body><div id=app></div><script src=/mobile/static/js/chunk-vendors.b01deae1.js></script><script src=/mobile/static/js/index.72abe792.js></script></body></html>