mobile video page edit

api/manage/manage.js

@@ -26,9 +26,13 @@ const userTaskList = function(data){
 const userDeleteStudy = function(data){
   return ajax.postJson(baseURL,'/stu/project/stuCancelEnrollment',data);
 }
-
+// 移动端视频播放器设置开关
+const getDictCode = function(code){
+  return ajax.get(baseURL+'/dict?code=' + code);
+}
 export default {
     getTaskNum,
     userTaskList,
-	userDeleteStudy
+	userDeleteStudy,
+	getDictCode
 }

api/modules/courseStudy.js

@@ -78,7 +78,6 @@ const studyInfo = function(courseId) {
  * @param {Object} contentId
  */
 const getStudyContentItem = function(studyId,contentId) {
-	console.log(1111)
     return ajax.post('/xboe/school/study/course/study-course-content',{studyId,contentId});
 }
 

components/video-player/progress-bar.vue

@@ -30,6 +30,10 @@ export default {
       type: String,
       default: "4px",
     },
+    fullScreenFlag:{
+      type: Boolean,
+      default: false,
+    },
     // 当前进度，范围0-1
     currentProgress: {
       type: Number,
@@ -46,8 +50,10 @@ export default {
   data() {
     return {
       is_mousedown_progress: false, //是否点击了进度条并保持点击状态
-      current_width_px: 0, // 当前进度条的像素长度
+      current_width_px: 0, // 当前竖屏进度条的像素长度
-      init_clientX: 0, //初始进度的偏移量，相对于视口
+	  current_height_px: 0, // 当前全屏进度条的像素长度
+      init_clientX: 0, //竖屏初始进度的偏移量，相对于视口
+	  init_clientY: 0, //全屏初始进度的偏移量，相对于视口
       dom_full: null, //完整进度条的dom，即进度条背景
     };
   },
@@ -73,6 +79,7 @@ export default {
     window.addEventListener("touchend", (e) => {
 		console.log("touchend::",this.is_mousedown_progress)
       this.up(e);
+	  // e.preventDefault();
     });
   },
   beforeDestroy() {
@@ -82,47 +89,91 @@ export default {
     start(e) {
         this.$emit("getMouseDownStatus", true);
         this.is_mousedown_progress = true;
-        // 获取完整进度条的clientX（dom左上角）
+		if(this.fullScreenFlag){
-        let init_clientX = this.dom_full.getBoundingClientRect().left;
+			// 全屏
-        // 计算调整后的当前进度条的长度
+			// 获取完整进度条的clientY（dom左上角）
-        this.current_width_px = e.touches[0].clientX - init_clientX;
+			let init_clientY = this.dom_full.getBoundingClientRect().top;
-        // 设置当前的播放进度（同时作用于当前进度条的样式）
+			// 计算调整后的当前进度条的长度
-        let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth;
+			this.current_height_px = e.touches[0].clientY - init_clientY;
-        var time = localStorage.getItem('videoProgressData');
+			// 设置当前的播放进度（同时作用于当前进度条的样式）
-        var arr = time&&JSON.parse(time) || {}
+			let current = (e.touches[0].clientY - init_clientY) / this.dom_full.clientWidth;
-		console.log('start::',e,this.isDrag,time,arr[this.blobId] ,current,e.touches[0].clientX,init_clientX,this.dom_full.clientWidth)
+			var time = localStorage.getItem('videoProgressData');
-        // 禁止拖动
+			var arr = time&&JSON.parse(time) || {}
-        if(!this.isDrag && time && arr[this.blobId] < current) return;
+			console.log('start::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,e.touches[0].clientY,init_clientY,this.dom_full.clientHeight,this.current_height_px,this.dom_full)
+			// 禁止拖动
+			if(!this.isDrag && time && arr[this.blobId] < current) return;
 
-        this.$emit("updateProgress",'start', current);
+			this.$emit("updateProgress",'start', current);
+		}else{
+			// 横屏
+			// 获取完整进度条的clientX（dom左上角）
+			let init_clientX = this.dom_full.getBoundingClientRect().left;
+			// 计算调整后的当前进度条的长度
+			this.current_width_px = e.touches[0].clientX - init_clientX;
+			// 设置当前的播放进度（同时作用于当前进度条的样式）
+			let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth;
+			var time = localStorage.getItem('videoProgressData');
+			var arr = time&&JSON.parse(time) || {}
+			console.log('start::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,e.touches[0].clientX,init_clientX,this.dom_full.clientWidth)
+			// 禁止拖动
+			if(!this.isDrag && time && arr[this.blobId] < current) return;
+
+			this.$emit("updateProgress",'start', current);
+		}
     },
     move(e) {
       if (this.is_mousedown_progress) {
-        let init_clientX = this.dom_full.getBoundingClientRect().left;
+		if(this.fullScreenFlag){
-        this.current_width_px = e.touches[0].clientX - init_clientX;
+			// 全屏
-        let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth;
+			let init_clientY = this.dom_full.getBoundingClientRect().top;
-        var time = localStorage.getItem('videoProgressData');
+			this.current_height_px = e.touches[0].clientY - init_clientY;
-        var arr = time&&JSON.parse(time) || {}
+			let current = (e.touches[0].clientY - init_clientY) / this.dom_full.clientWidth;
-		console.log('move::',e,this.isDrag,time,arr[this.blobId] ,current)
+			var time = localStorage.getItem('videoProgressData');
-        // 禁止拖动
+			var arr = time&&JSON.parse(time) || {}
-        if(!this.isDrag && time && arr[this.blobId] < current) return;
+			console.log('move::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,this.dom_full)
-        this.$emit("updateProgress",'move', current);
+			// 禁止拖动
+			if(!this.isDrag && time && arr[this.blobId] < current) return;
+			this.$emit("updateProgress",'move', current);
+		}else{
+			// 横屏
+			let init_clientX = this.dom_full.getBoundingClientRect().left;
+			this.current_width_px = e.touches[0].clientX - init_clientX;
+			let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth;
+			var time = localStorage.getItem('videoProgressData');
+			var arr = time&&JSON.parse(time) || {}
+			console.log('move::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current)
+			// 禁止拖动
+			if(!this.isDrag && time && arr[this.blobId] < current) return;
+			this.$emit("updateProgress",'move', current);
+		}
       }
     },
     up() {
       if (this.is_mousedown_progress) {
-        // 标记鼠标不处于按下的状态了
+		// 标记鼠标不处于按下的状态了
-        this.is_mousedown_progress = false;
+		this.is_mousedown_progress = false;
-        this.$emit("getMouseDownStatus", false);
+		this.$emit("getMouseDownStatus", false);
-        // 松开鼠标后，即调整进度条后，此时的进度（0-1）
+		if(this.fullScreenFlag){
-        let current = this.current_width_px / this.dom_full.clientWidth;
+			// 全屏
-        var time = localStorage.getItem('videoProgressData');
+			// 松开鼠标后，即调整进度条后，此时的进度（0-1）
-        var arr = time&&JSON.parse(time) || {}
+			let current = this.current_height_px / this.dom_full.clientWidth;
-		console.log('up::',this.isDrag,time,arr[this.blobId] ,current)
+			var time = localStorage.getItem('videoProgressData');
-        // 禁止拖动
+			var arr = time&&JSON.parse(time) || {}
-        if(!this.isDrag && time && arr[this.blobId] < current) return;
+			console.log('up::',this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,this.dom_full)
-        this.$emit("updateProgress",'end', current);
+			// 禁止拖动
-        
+			if(!this.isDrag && time && arr[this.blobId] < current) return;
+			this.$emit("updateProgress",'end', current);
+		}else{
+			// 横屏
+			// 松开鼠标后，即调整进度条后，此时的进度（0-1）
+			let current = this.current_width_px / this.dom_full.clientWidth;
+			var time = localStorage.getItem('videoProgressData');
+			var arr = time&&JSON.parse(time) || {}
+			console.log('up::',this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current)
+			// 禁止拖动
+			if(!this.isDrag && time && arr[this.blobId] < current) return;
+			this.$emit("updateProgress",'end', current);
+		}
       }
     },
   },

components/video-player/video-player.vue

@@ -1,9 +1,13 @@
 <template>
-	<view id="xvideoPlayer-box" class="video-box">
+<view>
-		<video id="xvideoPlayer" style="width: 100%;"
+	<view v-if="!xvideoBool" id="xvideoPlayer-box" :class="fullScreenFlag?'video-box video-full-screen':'video-box'">
+		<!--webkit-playsinline playsinline x5-video-player-type="h5-page-->
+		<!-- <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':''}"
 			:src="url"
 			:controls="false"
 			:enable-play-gesture="false"
+			:enable-progress-gesture="false"
 			:initial-time="initPlayingTime"
 			@error="error" 
 			@touchend="onTouchend"
@@ -16,21 +20,23 @@
 			@loadedmetadata="onMetaLoad"
 			@controlstoggle="onControlsToggle"
 		></video>
-		<view id="xplayer-control" >
+		<view id="xplayer-control">
-			<view class="process-container" v-if="contrlShow">
+			<!-- <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="controller-play">
 					<image :src="require(playing? './images/pause.png':'./images/play.png')"  @click.stop='videoOpreation'/>
 				</view>
 				<view class="currtime">{{currtime}}</view>
-				  <cover-view v-if="drag" class='slider-container'>
+				  <!-- <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"/>
-					
+					 -->
 					<!-- <slider v-if="!drag"  disabled="true" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/> -->
-				 </cover-view> 
+				 <!-- </cover-view> -->
-				<view v-if="!drag" class='slider-container new-bar'>
+				<view class='slider-container new-bar'>
 		          	<progressBar 
 			            :currentProgress="sliderValue"
 						:blobId="blobId"
+						:fullScreenFlag="fullScreenFlag"
 			            v-on:updateProgress="updateProgressByClickBar"
 			            v-on:getMouseDownStatus="getMouseDownStatusOfProgressBar"
 			            :isDrag="drag"
@@ -60,14 +66,33 @@
 				<view class="controller-screen">
 					<image :src="require(fullScreenFlag? './images/back.png':'./images/full.png')"  @click.stop='fullScreen'/>
 				</view>
+				<!-- <view v-if="fullScreenFlag" @click.stop='horizontalScreen' class="controller-screen">
+					<text>{{horizontalScreenFlag? '竖屏':'横屏'}}</text>
+				</view> -->
 			</view>
 		</view>
 	</view>
+	<view v-if="xvideoBool"  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>
+</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(){
+		let bool = false
+		let agent = navigator.userAgent
+		if(agent.indexOf('XiaoMi')!=-1){
+			bool = true
+		}
+		return bool
+	}
+	//alert(navigator.userAgent +'----'+ agentFullScreen())
 	export default {
 		components: { progressBar },
 		props: {
@@ -99,6 +124,7 @@
 		},
 		data() {
 			return {
+				xvideoBool: agentFullScreen(), // 是否显示视频
 				contrlShow:false,//是否显示控制条
 				contrlShowTimeout:null,//显示控制条句柄
 				videoContext:null,//播放器
@@ -118,7 +144,13 @@
 				speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
 				videoSpeed: 1.0, // 当前倍速:
 				isMousedownProgress: false, // 鼠标是否按下了进度条（并未松开）
-				historyTime: 0 // 当前视频
+				historyTime: 0, // 当前视频
+				videoFullHeight: 190, // 控制条的高度
+				videoPageWidth: 0, // 当前页面窗口宽度
+				videoPageHeight: 0, // 当前页面窗口高度
+				// horizontalScreenFlag: true // 默认竖屏
+				mobileVideoDragSwitch: '', // 视频播放器扔要使用此浏览器观看
+				mobileVideoDragText: '', // 视频播放器妆容提示文本内容
 			};
 		},
 		computed: {
@@ -134,10 +166,35 @@
 			}
 		},
 		mounted() {
+			var _this = this
 			this.initPlayingTime=this.inittime;
 			this.videoContext=uni.createVideoContext("xvideoPlayer", this);
+			uni.getSystemInfo({
+			  success: function (info) {
+				  //alert(info.windowWidth)
+				_this.videoPageWidth=info.windowWidth;
+				_this.videoPageHeight=info.windowHeight;
+				// 你可以在这里根据窗口高度进行后续操作
+			  }
+			});
+			this.dictCode();
 		},
 		methods: {
+				xvideoBoolFun(){
+					this.xvideoBool = false
+				},
+				// 获取视频播放器设置开关字典
+				dictCode(){
+					var _this = this
+					apiManage.getDictCode('mobile_video_switch').then(res=>{
+						console.log('字典res::',res.code,res.data[0].name)
+						if(res.code==200){
+							_this.mobileVideoDragText = res.data[0].name
+							_this.mobileVideoDragSwitch = res.data[0].value
+							console.log('11111:',_this.mobileVideoDragText,_this.mobileVideoDragSwitch)
+						}
+					})
+				},
 			    /* 点击进度条更新视频播放进度
 			     */
 			    updateProgressByClickBar(type,value) {
@@ -172,14 +229,56 @@
 			    },
 				// 全屏+退出全屏
 				fullScreen(){
+					var _this = this
 					if(this.fullScreenFlag){
-						this.videoContext.exitFullScreen();
+						//this.videoContext.exitFullScreen();
 						this.fullScreenFlag=false;
+						// this.horizontalScreenFlag = true
+						this.videoFullHeight=190
+						
+						if(document && document.exitFullscreen){
+							
+							document.body.scrollTop = 0; // 对Safari
+							document.documentElement.scrollTop = 0; // 对Chrome, Firefox, IE 和 Opera
+							document.exitFullscreen();
+						}						
+						
 					}else{
-						this.videoContext.requestFullScreen();
+						//this.videoContext.requestFullScreen();
 						this.fullScreenFlag=true;
+						if(document.documentElement.requestFullscreen){
+							// document.documentElement.requestFullscreen();
+						}else{
+							window.screenTop(0)
+						}
+						uni.getSystemInfo({
+						  success: function (info) {
+						    _this.videoFullHeight=info.windowHeight/2 + 130;
+						    // 你可以在这里根据窗口高度进行后续操作
+						  }
+						});
 					}
 				},
+				// // 全屏模式下，横屏+竖屏
+				// horizontalScreen(){
+				// 	var _this = this
+				// 	if(this.horizontalScreenFlag){
+				// 		//this.videoContext.exitFullScreen();
+				// 		this.horizontalScreenFlag=false;
+				// 		// this.videoFullHeight=190
+						
+				// 	}else{
+				// 		//this.videoContext.requestFullScreen();
+				// 		this.horizontalScreenFlag=true;
+						
+				// 		// uni.getSystemInfo({
+				// 		//   success: function (info) {
+				// 		//     _this.videoFullHeight=info.windowHeight/2 + 130;
+				// 		//     // 你可以在这里根据窗口高度进行后续操作
+				// 		//   }
+				// 		// });
+				// 	}
+				// },
 				// 根据秒获取时间
 				formatSeconds(a) {
 					var hh = parseInt(a/3600);  
@@ -391,6 +490,9 @@
 				},
 				onEnded(){
 					this.playing=false;
+					if(this.fullScreenFlag){
+						this.fullScreen()
+					}
 					this.$emit('ended')
 				}
 		}
@@ -403,6 +505,31 @@
 		height: 100%;
 		position: relative;
 	}
+	.video-box-error{
+		width: 100%;
+		height: 110px;
+		padding: 55px 0;
+		background: #000000;
+		text-align: center;
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+	.video-full-screen{
+		position: fixed;
+		width: 100vw;
+		height: 100vh;
+		background: #000000;
+		z-index: 9999999;
+		display: flex;
+		align-items: center;
+	}
+	.video-scree-rotate{
+		transform: rotate(90deg);
+		// width: 100vw;
+		// height: 100vh;
+		position: fixed;
+	}
 	.screen{
 		position: relative;
 	}
@@ -443,7 +570,7 @@
 		width: 8%;
 	}
 	.controller-screen{
-		width: 10%;
+		// width: 10%;
 	}
 	.currtime{
 		color: #ffffff;

index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> -->
     <title><%= htmlWebpackPlugin.options.title %></title>
 	<style type="text/css">

pages/study/courseStudy.vue

@@ -491,7 +491,7 @@
 				scormUrl:'',
 				maxDuration:0, //非音频最大时长
 				cumulativeDuration:0, //非音频累计时长
-				defaultMaxTime:1800, //非音频默认最大时间
+				defaultMaxTime:1800 //非音频默认最大时间
 			}
 		},
 		computed: {
@@ -555,6 +555,7 @@
 		},
 		onShow(){
 			uni.setNavigationBarTitle({ title:'\u200E' })
+			
 			//实时渲染当前的播放状态
 		},
 		onReady() {
@@ -575,6 +576,7 @@
 			    getSysTypeTree:'sysType/getSysTypeTree',
 			    loadSysTypes:'sysType/loadSysTypes'
 			}),
+			
 			// 没有写播放时间
 		    onPlayerPlay() {
 			  this.playerBoxShow = false;
@@ -951,15 +953,15 @@
 				} else if(con.contentType==10 || con.contentType==20) {
 					if(con.content.startsWith('\{')){
 						var d = JSON.parse(con.content)
-						if(d.url=="/course/2024/4/1224670812274712576.mp4") d.isDrag = false
+						// if(d.url=="/course/2024/4/1224670812274712576.mp4") d.isDrag = false
 					    this.curriculumData=d;
 					}else{
 					   this.curriculumData.url=con.content;
 					}
 					console.log('this.curriculumData:::',this.curriculumData)
+					
 					this.blobUrl=this.fileBaseUrl+this.curriculumData.url;
-					this.blobId = con.id
+					this.blobId = con.id;
-					//console.log(this.blobUrl,'this.blobUrl');
 				}
 				//console.log(con.contentType,'con.contentType');
 				this.curContent=con;