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>
+    <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,11 +27,12 @@
       </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>
-				<view class="currtime">{{currtime}}</view>
+          <view class="currtime">{{ currtime }}</view>
           <!-- <cover-view v-if="drag" class='slider-container'>
           <slider  @change.stop="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
            -->
@@ -47,10 +51,10 @@
           </view>
 
 
-				<view class="druationTime">{{druationTime}}</view>
+          <view class="druationTime">{{ druationTime }}</view>
           <view class="druationTime">
             <view id="myVideoSpeed" class="player-speed btn-speed">
-					  <view @click="showSpeedCtrl">{{videoSpeed === 1 ? '倍速' : `${videoSpeed}x`}}</view>
+              <view @click="showSpeedCtrl">{{ videoSpeed === 1 ? '倍速' : `${videoSpeed}x` }}</view>
               <view class="speed-control" v-if="speedListShow">
                 <view class="speed-control-list">
                   <view class="li"
@@ -75,30 +79,34 @@
       </view>
     </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>
+      <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>
+    </view>
   </view>
-</view>
 </template>
 <script>
-	import progressBar from "@/components/video-player/progress-bar.vue";
-	import {mapGetters} from 'vuex'
-	import studyUtil from '@/utils/study.js';
-	import apiManage from '@/api/manage/manage.js';
-	// getDictCode
-	function agentFullScreen(){
+import progressBar from "@/components/video-player/progress-bar.vue";
+import {mapGetters} from 'vuex'
+import studyUtil from '@/utils/study.js';
+import apiManage from '@/api/manage/manage.js';
+
+// getDictCode
+function agentFullScreen() {
   let bool = false
   let agent = navigator.userAgent
-		if(agent.indexOf('XiaoMi')!=-1){
+  if (agent.indexOf('XiaoMi') != -1) {
     bool = true
   }
   return bool
-	}
-	//alert(navigator.userAgent +'----'+ agentFullScreen())
-	export default {
-		components: { progressBar },
+}
+
+//alert(navigator.userAgent +'----'+ agentFullScreen())
+export default {
+  components: {progressBar},
   props: {
-			url:{
+    url: {
       type: String,
       require: true
     },
@@ -107,19 +115,19 @@
       type: String,
       default: null,
     },
-			watermark:{
+    watermark: {
       type: Boolean,
       default: true
     },
-			name:{
+    name: {
       type: String,
       default: ''
     },
-			drag:{
+    drag: {
       type: Boolean,
       default: true
     },
-			inittime:{//默认播放的位置,第几秒
+    inittime: {//默认播放的位置,第几秒
       type: Number,
       default: 0
     },
@@ -127,23 +135,23 @@
   data() {
     return {
       xvideoBool: agentFullScreen(), // 是否显示视频
-				contrlShow:false,//是否显示控制条
-				contrlShowTimeout:null,//显示控制条句柄
-				videoContext:null,//播放器
+      contrlShow: false,//是否显示控制条
+      contrlShowTimeout: null,//显示控制条句柄
+      videoContext: null,//播放器
       fullScreenFlag: false,//是否全屏
-				currtime:'00:00',//当前播放时间 字符串 计算后
-				druationTime:'00:00',//总时间 字符串 计算后
-				initPlayingTime:0,//指定播放的时间位置
+      currtime: '00:00',//当前播放时间 字符串 计算后
+      druationTime: '00:00',//总时间 字符串 计算后
+      initPlayingTime: 0,//指定播放的时间位置
       sliderValue: 0, //控制进度条slider的值，
       updateState: true, //防止视频播放过程中导致的拖拽失效
-				playing:false,//是否在播放中
-				curVideo:{
-					duration:0,
+      playing: false,//是否在播放中
+      curVideo: {
+        duration: 0,
         currentTime: 0
       },
-				touchNum:0,
-				speedListShow:false,
-				speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
+      touchNum: 0,
+      speedListShow: false,
+      speedList: ["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
       videoSpeed: 1.0, // 当前倍速:
       isMousedownProgress: false, // 鼠标是否按下了进度条（并未松开）
       historyTime: 0, // 当前视频
@@ -162,45 +170,45 @@
   computed: {
     ...mapGetters(['userInfo']),
   },
-		watch:{
-			url(newVal,oldVal){
+  watch: {
+    url(newVal, oldVal) {
       //console.log( 'watch url:',newVal,oldVal,this.videoContext)
       //document.getElementById('xvideoPlayer').style.display = 'none'
       this.videoContext.stop();
-				this.playing=false;
+      this.playing = false;
       this.curVideo.currentTime = 0;
       this.iosCurrentTime = 0;
       this.sliderValue = 0;
       this.videoSpeed = 1.0;
       this.currtime = "00:00";
       document.getElementsByTagName('video')[0].load()
-				setTimeout(()=>{
+      setTimeout(() => {
         document.getElementsByTagName('video')[0].play()
-				},100)
+      }, 100)
 
       //this.videoContext.load();
       //document.getElementById('xvideoPlayer').style.display = 'block'
       //this.videoContext=uni.createVideoContext("xvideoPlayer", this);
     },
-			inittime(newVal,oldVal){
-				this.initPlayingTime=newVal;
+    inittime(newVal, oldVal) {
+      this.initPlayingTime = newVal;
       //console.log('inittime::',newVal,oldVal)
     }
   },
   mounted() {
     var _this = this
-			this.initPlayingTime=this.inittime;
-			this.videoContext=uni.createVideoContext("xvideoPlayer", this);
+    this.initPlayingTime = this.inittime;
+    this.videoContext = uni.createVideoContext("xvideoPlayer", this);
     // document.getElementsByTagName('video')[0].load()
     uni.getSystemInfo({
       success: function (info) {
         //alert(info.windowWidth)
-				_this.videoPageWidth=info.windowWidth;
-				_this.videoPageHeight=info.windowHeight;
+        _this.videoPageWidth = info.windowWidth;
+        _this.videoPageHeight = info.windowHeight;
         // 你可以在这里根据窗口高度进行后续操作
       }
     });
-			if(this.xvideoBool) this.dictCode();
+    if (this.xvideoBool) this.dictCode();
 
     // 每一秒更新进度条
     setInterval(() => {
@@ -217,20 +225,20 @@
     }, 1000);
     //绑定全局监听器
     window.addEventListener("touchstart", (e) => {
-				if(this.speedListShow && !e.target.closest('.speed-control')){
+      if (this.speedListShow && !e.target.closest('.speed-control')) {
         this.speedListShow = false
       }
-			},{ passive: false });
+    }, {passive: false});
   },
   methods: {
-				xvideoBoolFun(){
+    xvideoBoolFun() {
       this.xvideoBool = false
     },
     // 获取视频播放器设置开关字典
-				dictCode(){
+    dictCode() {
       var _this = this
-					apiManage.getDictCode('mobile_video_switch').then(res=>{
-						if(res.code==200 && res.data[0]){
+      apiManage.getDictCode('mobile_video_switch').then(res => {
+        if (res.code == 200 && res.data[0]) {
           _this.mobileVideoDragText = res.data[0].name
           _this.mobileVideoDragSwitch = res.data[0].value
         }
@@ -238,13 +246,13 @@
     },
     /* 点击进度条更新视频播放进度
      */
-			    updateProgressByClickBar(type,value) {
+    updateProgressByClickBar(type, value) {
 
       let duration = this.curVideo.duration;
       let second = Math.round(value * duration);
       this.curVideo.currentTime = second;
 
-				   this.sliderValue= value * 100,
+      this.sliderValue = value * 100,
 
           this.druationTime = this.formatSeconds(duration);
       this.currtime = this.formatSeconds(second);
@@ -254,13 +262,13 @@
       // var second= value * duration;
       if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
 
-						if(type === 'start'){
-							this.updateState= false;
+        if (type === 'start') {
+          this.updateState = false;
         }
-						if( type === 'end'){
+        if (type === 'end') {
           this.videoContext.seek(second);
           this.curVideo.currentTime = second;
-							this.updateState= true //完成拖动后允许更新滚动条
+          this.updateState = true //完成拖动后允许更新滚动条
           //alert('value000------:'+value+'---'+this.curVideo.duration)
         }
       }
@@ -271,15 +279,18 @@
       this.isMousedownProgress = value;
     },
     // 全屏+退出全屏
-				fullScreen(){
-          console.log( "full screen")
-          this.$listeners['fullscreenchange'](this.fullScreenFlag)
+    fullScreen() {
+      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){
+      if (this.fullScreenFlag) {
         //this.videoContext.exitFullScreen();
-						this.fullScreenFlag=false;
+        this.fullScreenFlag = false;
         // this.horizontalScreenFlag = true
-						this.videoFullHeight=190
+        this.videoFullHeight = 190
 
         // if(document && document.exitFullscreen){
         // 	document.body.scrollTop = 0; // 对Safari
@@ -287,21 +298,24 @@
         // 	document.exitFullscreen();
         // }
 
-					}else{
+      } else {
         //this.videoContext.requestFullScreen();
-						this.fullScreenFlag=true;
-						if(document.documentElement.requestFullscreen){
+        this.fullScreenFlag = true;
+
+        if (document.documentElement.requestFullscreen) {
           // document.documentElement.requestFullscreen();
-						}else{
+        } else {
           // window.screenTop(0)
         }
         uni.getSystemInfo({
           success: function (info) {
-						    _this.videoFullHeight=info.windowHeight/2 + 130;
+            _this.videoFullHeight = info.windowHeight / 2 + 130;
             // 你可以在这里根据窗口高度进行后续操作
           }
         });
       }
+      console.log("full screen")
+      !isIOS && this.$listeners['fullscreenchange'](this.fullScreenFlag)
     },
     // // 全屏模式下，横屏+竖屏
     // horizontalScreen(){
@@ -325,16 +339,16 @@
     // },
     // 根据秒获取时间
     formatSeconds(a) {
-					var hh = parseInt(a/3600);  
-					var mm = parseInt((a-hh*3600)/60);  
-					if(mm<10) mm = "0" + mm;  
-					var ss = parseInt((a-hh*3600)%60);  
-					if(ss<10) ss = "0" + ss;  
-					if(hh<10) hh = hh == 0?'':`0${hh}:`;  
+      var hh = parseInt(a / 3600);
+      var mm = parseInt((a - hh * 3600) / 60);
+      if (mm < 10) mm = "0" + mm;
+      var ss = parseInt((a - hh * 3600) % 60);
+      if (ss < 10) ss = "0" + ss;
+      if (hh < 10) hh = hh == 0 ? '' : `0${hh}:`;
       var length = hh + mm + ":" + ss;
-					if(a>=0){  
+      if (a >= 0) {
         return length;
-					}else{  
+      } else {
         return "00:00";
       }
     },
@@ -344,28 +358,28 @@
       this.videoSpeed = Number(value);
       this.videoContext.playbackRate(this.videoSpeed);
       studyUtil.setVideoSpeed(this.videoSpeed);
-				  this.speedListShow=false;
+      this.speedListShow = false;
     },
-				showSpeedCtrl(){
-					if(this.speedListShow){
-						this.speedListShow=false;
-					}else{
-						this.speedListShow=true;
+    showSpeedCtrl() {
+      if (this.speedListShow) {
+        this.speedListShow = false;
+      } else {
+        this.speedListShow = true;
       }
     },
     //开始+暂停
     videoOpreation() {
       this.playing ? this.videoContext.pause() : this.videoContext.play();
-				    this.playing= !this.playing;
+      this.playing = !this.playing;
     },
     // 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
     videoUpdate(e) {
 
       this.historyTime = e.detail.currentTime
 
-					let duration=this.curVideo.duration;
+      let duration = this.curVideo.duration;
       let sliderValue = e.detail.currentTime / duration * 100;
-					let second=sliderValue / 100 * duration;
+      let second = sliderValue / 100 * duration;
       // console.log('onTimeUpdate11111::',this.drag,second)
       // if(!this.drag){
       // 	this.videoContext.seek(second);
@@ -373,10 +387,9 @@
       // }
 
 
-
       if (this.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
-						this.sliderValue=sliderValue;
-					}else{
+        this.sliderValue = sliderValue;
+      } else {
 
       }
 
@@ -396,12 +409,12 @@
       //  }
       //    }
       // 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行
-					if(!this.drag){
+      if (!this.drag) {
         var time = localStorage.getItem('videoProgressData')
-						var arr = time&&JSON.parse(time) || {}
-						if(arr[this.blobId] < this.sliderValue/100 || !arr[this.blobId]){
-							arr[this.blobId] = parseFloat((this.sliderValue/100).toFixed(8))
-							if(arr[this.blobId]) localStorage.setItem('videoProgressData',JSON.stringify(arr))
+        var arr = time && JSON.parse(time) || {}
+        if (arr[this.blobId] < this.sliderValue / 100 || !arr[this.blobId]) {
+          arr[this.blobId] = parseFloat((this.sliderValue / 100).toFixed(8))
+          if (arr[this.blobId]) localStorage.setItem('videoProgressData', JSON.stringify(arr))
         }
       }
 
@@ -409,42 +422,42 @@
     //拖动过程中触发的事件
     sliderChanging(e) {
       //拖拽过程中，不允许更新进度条
-					this.updateState= false;
+      this.updateState = false;
     },
     // 拖动slider完成后触发
     sliderChange(e) {
-					var duration=this.curVideo.duration;
-					var second=e.detail.value / 100 * duration;
+      var duration = this.curVideo.duration;
+      var second = e.detail.value / 100 * duration;
       // alert(e.detail.value + '--slider--'+duration + '--' +second)
       if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
         this.videoContext.seek(second);
-					   this.sliderValue= e.detail.value,
-					   this.updateState= true //完成拖动后允许更新滚动条
+        this.sliderValue = e.detail.value,
+            this.updateState = true //完成拖动后允许更新滚动条
         this.druationTime = this.formatSeconds(duration);
         this.currtime = this.formatSeconds(second);
         //alert('3---this.currtime='+this.currtime)
       }
     },
     onFullScreen(e) {
-					this.fullScreenFlag=e.detail.fullScreen;
-					let divId='videowatermark';//水印
-					let full=e.detail.fullScreen;
-					let divControlId='xplayer-control';
-					let box=document.getElementById('xvideoPlayer-box');
-					let control=document.getElementById(divControlId);
-					let $this=this;
+      this.fullScreenFlag = e.detail.fullScreen;
+      let divId = 'videowatermark';//水印
+      let full = e.detail.fullScreen;
+      let divControlId = 'xplayer-control';
+      let box = document.getElementById('xvideoPlayer-box');
+      let control = document.getElementById(divControlId);
+      let $this = this;
       setTimeout(() => {
         var div = document.getElementById("xvideoPlayer");
         var div1 = div.firstChild;
         //水印
-						if(full){
-							if($this.watermark){
+        if (full) {
+          if ($this.watermark) {
             var div3 = document.createElement("div");
-								div3.id =divId;
+            div3.id = divId;
             div3.setAttribute("class", "fullmark");
-								div3.innerHTML='';
-								for(var i=0;i<4;i++){
-									div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+$this.userInfo.name+$this.userInfo.code+'</div>';
+            div3.innerHTML = '';
+            for (var i = 0; i < 4; i++) {
+              div3.innerHTML += '<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">' + $this.userInfo.name + $this.userInfo.code + '</div>';
             }
             div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
             div1.appendChild(div3);
@@ -452,38 +465,38 @@
           }
           //添加控制条
           div1.appendChild(control);
-						}else{
-							var hasControlDiv=div1.querySelector("#"+divControlId);
-							if(hasControlDiv){
+        } else {
+          var hasControlDiv = div1.querySelector("#" + divControlId);
+          if (hasControlDiv) {
             box.appendChild(hasControlDiv);
           }
-							if($this.watermark){
-								var markDiv=div1.querySelector("#"+divId);
-								if(markDiv){
+          if ($this.watermark) {
+            var markDiv = div1.querySelector("#" + divId);
+            if (markDiv) {
               div1.removeChild(markDiv);
             }
           }
         }
 
-					},200);
-					this.$emit('fullscreenchange',e);
+      }, 200);
+      this.$emit('fullscreenchange', e);
       //this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
       // this.fullScreenFlag ? this.bool=true : this.bool=false;
       //this.fullScreenFlag=!this.fullScreenFlag;
     },
-				error(e){
-					console.log(e,'播放错误');
-					this.$emit('error',e);
+    error(e) {
+      console.log(e, '播放错误');
+      this.$emit('error', e);
     },
-				onTouchend(e){
-					if(this.contrlShowTimeout!=null){
+    onTouchend(e) {
+      if (this.contrlShowTimeout != null) {
         window.clearTimeout(this.contrlShowTimeout);
       }
-					if(!this.fullScreenFlag){
-						this.contrlShow=!this.contrlShow;
-					}else{
-						if(!this.contrlShow){
-							this.contrlShow=true;
+      if (!this.fullScreenFlag) {
+        this.contrlShow = !this.contrlShow;
+      } else {
+        if (!this.contrlShow) {
+          this.contrlShow = true;
         }
       }
       // this.onPlayerPause()
@@ -502,35 +515,35 @@
       // 	this.touchNum = 0
       // },250)
     },
-				onLoad(e){
-					this.contrlShow=false;
-					this.$emit('loadeddata',e);
+    onLoad(e) {
+      this.contrlShow = false;
+      this.$emit('loadeddata', e);
     },
-				onMetaLoad(e){
-					this.curVideo.duration=Number(e.detail.duration);
+    onMetaLoad(e) {
+      this.curVideo.duration = Number(e.detail.duration);
       this.druationTime = this.formatSeconds(this.curVideo.duration);
-					this.contrlShow=true;
-					this.$emit('loadedmetadata',e);
+      this.contrlShow = true;
+      this.$emit('loadedmetadata', e);
     },
-				onControlsToggle(e){
-					console.log(e,"ControlsToggle");
+    onControlsToggle(e) {
+      console.log(e, "ControlsToggle");
     },
     // 开始
-				onPlay(){
+    onPlay() {
       this.videoContext.play();
-					this.playing=true;
-					let $this=this;
-					if(this.contrlShow){
-						this.contrlShowTimeout=window.setTimeout(function(){
-							$this.contrlShow=false;
-						},5000);
+      this.playing = true;
+      let $this = this;
+      if (this.contrlShow) {
+        this.contrlShowTimeout = window.setTimeout(function () {
+          $this.contrlShow = false;
+        }, 5000);
       }
       this.$emit('play')
     },
-				onTimeUpdate(e){
+    onTimeUpdate(e) {
       this.currtimeText = this.currtimeText + 1
       this.videoUpdate(e);
-					this.$emit('timeupdate',e)
+      this.$emit('timeupdate', e)
     },
     /* 更新视频进度的文字显示
      */
@@ -542,7 +555,7 @@
     /* 时间格式化，秒格式化成xx:xx:xx
      */
     secondTimeFormat(second) {
-					if(second<0) second = 0;
+      if (second < 0) second = 0;
       let result = parseInt(second);
       let h =
           Math.floor(result / 3600) < 10
@@ -560,27 +573,28 @@
       return result;
     },
     onPause() {
-					this.playing=false;
+      this.playing = false;
       this.$emit('pause')
     },
-				onEnded(){
-					this.playing=false;
-					if(this.fullScreenFlag){
+    onEnded() {
+      this.playing = false;
+      if (this.fullScreenFlag) {
         this.fullScreen()
       }
       this.$emit('ended')
     }
   }
-	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.video-box{
+.video-box {
   width: 100%;
   height: 100%;
   position: relative;
-	}
-	.video-box-error{
+}
+
+.video-box-error {
   width: 100%;
   height: 110px;
   padding: 55px 0;
@@ -589,8 +603,9 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-	}
-	.video-full-screen{
+}
+
+.video-full-screen {
   position: fixed;
   width: 100vw;
   height: 100vh;
@@ -598,88 +613,103 @@
   z-index: 9999999;
   display: flex;
   align-items: center;
-	}
-	.video-scree-rotate{
+}
+
+.video-scree-rotate {
   transform: rotate(90deg);
   // width: 100vw;
   // height: 100vh;
   position: fixed;
-	}
-	.screen{
+}
+
+.screen {
   position: relative;
-	}
-	.screen-full{
-		position:static;
-	}
-	.process-container{
-		width:100%;
-		padding:1% 2% 1% 2%;
-		height:60rpx;
-		max-height:60rpx;
-		position:absolute;
-		bottom:0rpx;
-		color:#ffffff;
-		left:0;
-		right:0;
-		z-index:9999;
-		display:flex;
+}
+
+.screen-full {
+  position: static;
+}
+
+.process-container {
+  width: 100%;
+  padding: 1% 2% 1% 2%;
+  height: 60rpx;
+  max-height: 60rpx;
+  position: absolute;
+  bottom: 0rpx;
+  color: #ffffff;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  display: flex;
   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;
-	  margin-bottom:10rpx;
-	  flex:6;
-	  max-width:50%;
-	}
-	.slider-container.new-bar{
+  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;
+  margin-bottom: 10rpx;
+  flex: 6;
+  max-width: 50%;
+}
+
+.slider-container.new-bar {
   margin: 7px 10px 10px 10px;
-	}
-	.controller-play{
+}
+
+.controller-play {
   width: 8%;
-	}
-	.controller-screen{
+}
+
+.controller-screen {
   // width: 10%;
-	}
-	.currtime{
+}
+
+.currtime {
   color: #ffffff;
   font-size: 22rpx;
   width: 11%;
   height: 100%;
   line-height: 60rpx;
   text-align: center;
-	}
-	.druationTime{
+}
+
+.druationTime {
   color: #ffffff;
   font-size: 22rpx;
   width: 12%;
   height: 100%;
   line-height: 60rpx;
   text-align: center;
-	}
-	.player-speed{
+}
+
+.player-speed {
   position: relative;
   color: #e5e5e5;
   padding: 0 0.4rem;
   transition: color 0.3s;
   height: 22px;
-	}
-	.btn-speed:hover .speed-control {
+}
+
+.btn-speed:hover .speed-control {
   // visibility: visible;
-	}
-	.speed-control {
+}
+
+.speed-control {
   position: absolute;
   //top: 180px;
   transition: visibility 0.3s;
   transform: translate(-50%, -100%);
-	}
-	.speed-control .speed-control-list {
+}
+
+.speed-control .speed-control-list {
   list-style: none;
   color: #e5e5e5;
   width: 50px;
@@ -690,20 +720,23 @@
   overflow: hidden;
   border-radius: 4px;
   background: rgba(21, 21, 21, 0.8);
-	}
-	.speed-control .speed-control-list .li {
+}
+
+.speed-control .speed-control-list .li {
   position: relative;
   display: block;
   height: 25px;
   line-height: 25px;
-	}
-	.speed-control .speed-control-list .li:hover {
+}
+
+.speed-control .speed-control-list .li:hover {
   color: #fff;
   background: rgba(99, 99, 99, 0.8);
-	}
-	.speed-control .speed-control-list .li.current {
+}
+
+.speed-control .speed-control-list .li.current {
   color: var(--primaryColor);
-	}
+}
 
 
 </style>

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>