视频组件

components/video-player/video-player.vue

@@ -3,20 +3,19 @@
 		<video id="myVideo" style="width: 100%;"
 			:src="url"
 			:controls="false"
-			:initial-time="videoPlayingTime"
-			@error="videoErrorCallback" 
-			@touchend="onPlayerTouchend"
-			@play="onPlayerPlay"
-			@pause="onPlayerPause"
-			@ended="onPlayerEnded"
-			@timeupdate="onPlayerPlaying"
+			:enable-play-gesture="true"
+			:initial-time="initPlayingTime"
+			@error="onError" 
+			@touchend="onTouchend"
+			@play="onPlay"
+			@pause="onPause"
+			@ended="onEnded"
+			@timeupdate="onPlaying"
 			@fullscreenchange="onFullScreen"
-			@loadeddata="onPalyerLoad"
-			@loadedmetadata="onPlayerMetaLoad"
-			@controlstoggle="onPlayerControlsToggle"
-			@dblclick="dbclickVideo"
-		>
-		</video>
+			@loadeddata="onLoad"
+			@loadedmetadata="onMetaLoad"
+			@controlstoggle="onControlsToggle"
+		></video>
 		<view v-if="contrlShow">
 			<view class="process-container">
 				<view class="controller-play">
@@ -24,7 +23,7 @@
 				</view>
 				<view class="currtime">{{currtime}}</view>
 				<view class='slider-container'>
-					<slider @change="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
+					<slider :disabled="!drag" @change="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
 				</view>
 				<view class="druationTime">{{druationTime}}</view>
 				<view class="druationTime">
@@ -60,7 +59,15 @@
 				type: String,
 				require: true
 			},
-			initTime:{//默认播放的位置,第几秒
+			name:{
+				type: String,
+				default: ''
+			},
+			drag:{
+				type: Boolean,
+				default: true
+			},
+			inittime:{//默认播放的位置,第几秒
 				type: Number, 
 				default: 0
 			},
@@ -73,13 +80,14 @@
 				fullScreenFlag: false,//是否全屏
 				currtime:'00:00',//当前播放时间 字符串 计算后
 				druationTime:'00:00',//总时间 字符串 计算后
-				videoPlayingTime:0,//指定播放的时间位置
+				initPlayingTime:0,//指定播放的时间位置
 				sliderValue: 0, //控制进度条slider的值，
-				updateState: false, //防止视频播放过程中导致的拖拽失效
+				updateState: true, //防止视频播放过程中导致的拖拽失效
 				playing:false,//是否在播放中
 				curVideo:{
 					duration:0
 				},
+				touchNum:0,
 				speedListShow:false,
 				speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
 				videoSpeed: 1.0, // 当前倍速:
@@ -88,30 +96,26 @@
 		computed: {
 			...mapGetters(['userInfo']),
 		},
-		created() {
-			
+		watch:{
+			url(newVal,oldVal){
+				this.videoContext.pause();
+				this.playing=false;
+			},
+			inittime(newVal,oldVal){
+				this.initPlayingTime=newVal;
+			}
 		},
 		mounted() {
+			this.initPlayingTime=this.inittime;
 			this.videoContext=uni.createVideoContext("myVideo", this);
-		
 		},
 		methods: {
-				
 				// 全屏+退出全屏
 				fullScreen(){
 					this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
 					// this.fullScreenFlag ? this.bool=true : this.bool=false;
 					this.fullScreenFlag=!this.fullScreenFlag;
 				},
-				onFullScreen(e) { 
-				    this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
-					// this.fullScreenFlag ? this.bool=true : this.bool=false;
-					this.fullScreenFlag=!this.fullScreenFlag;
-				},
-				
-				videoErrorCallback(e){
-					console.log(e,'播放错误');
-				},
 				// 根据秒获取时间
 				formatSeconds(a) {
 					var hh = parseInt(a/3600);  
@@ -177,7 +181,6 @@
 					   this.druationTime = this.formatSeconds(duration);
 					   this.currtime = this.formatSeconds(second);
 					}
-					else { }
 				},
 				clickVideo(){
 					// if(this.contrlShowTimeout!=null){
@@ -185,59 +188,70 @@
 					// }
 					// this.contrlShow=!this.contrlShow;
 				},
-				dblclickVideo(){
-					console.log("双击了");
+				onFullScreen(e) {
+					this.$emit('fullscreenchange',e);
+				    //this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
+					// this.fullScreenFlag ? this.bool=true : this.bool=false;
+					//this.fullScreenFlag=!this.fullScreenFlag;
 				},
-				onPlayerTouchend(e){
+				onError(e){
+					console.log(e,'播放错误');
+					this.$emit('error',e);
+				},
+				onTouchend(e){
 					// this.onPlayerPause()
-					this.touchNum ++
-					setTimeout(()=>{
-						if(this.touchNum == 1){
-							// console.log('单击')
-						}else  if(this.touchNum >= 2){
-							if(this.isPlaying){
-								this.onPlayerPause()
-							} else {
-								this.onPlayerPlay()
-							}
-						}
-						this.touchNum = 0
-					},250)
+					// this.touchNum ++
+					// let $this=this;
+					// setTimeout(()=>{
+					// 	if($this.touchNum == 1){
+					// 		// console.log('单击')
+					// 	}else  if($this.touchNum >= 2){
+					// 		if($this.playing){
+					// 			$this.onPause()
+					// 		} else {
+					// 			$this.onPlay()
+					// 		}
+					// 	}
+					// 	this.touchNum = 0
+					// },250)
 				},
-				onPlayerLoad(e){
+				onLoad(e){
 					this.contrlShow=false;
+					this.$emit('loadeddata',e);
 				},
-				onPlayerMetaLoad(e){
+				onMetaLoad(e){
 					this.curVideo.duration=Number(e.detail.duration);
 					this.druationTime = this.formatSeconds(this.curVideo.duration);
+					this.$emit('loadedmetadata',e);
 				},
-				onPlayerControlsToggle(e){
+				onControlsToggle(e){
 					console.log(e,"ControlsToggle");
 				},
 				// 开始
-				onPlayerPlay(){
+				onPlay(){
 					this.videoContext.play();
 					this.playing=true;
-					this.contrlShow=true;
-				},
-				onPlayerPlaying(e){
-					this.playing=true;
-					this.updateState=true;
-					this.videoUpdate(e);
+					//this.contrlShow=true;
 					// let $this=this;
 					// if(this.contrlShow){
 					// 	this.contrlShowTimeout=window.setTimeout(function(){
 					// 		$this.contrlShow=false;
 					// 	},5000);
 					// }
+					this.$emit('play')
 				},
-				// 暂停
-				onPlayerPause() {
-					this.videoContext.pause(); //站厅播放
-					this.playing=false;
+				onPlaying(e){
+					this.playing=true;
+					this.videoUpdate(e);
+					this.$emit('playing',e)
 				},
-				onPlayerEnded(){
+				onPause() {
 					this.playing=false;
+					this.$emit('pause')
+				},
+				onEnded(){
+					this.playing=false;
+					this.$emit('ended')
 				}
 		}
 	}
@@ -259,7 +273,7 @@
 		color:#ffffff;
 		left:0;
 		right:0;
-		z-index:99;
+		z-index:9999;
 		display:flex;
 		align-items: center;
 		background:rgba(59, 57, 57, 0.2);

pages/study/videoTest.vue

@@ -4,11 +4,13 @@
 			<video-player 
 				:url="fileUrl" 
 				:name="title" 
+				:inittime="initTime"
 				:drag="true"
-				@onPlay="videoPlay"
-				@onPause="videoPause"
-				@onPlaying="videoPlaying"
-				@onEnded="videoEnd">
+				@play="videoPlay"
+				@pause="videoPause"
+				@playing="videoPlaying"
+				@ended="videoEnd"
+				@fullscreenchange="videoScreen">
 			</video-player>
 		</view>
 		<!-- <view style="padding-top: 30px;display: flex;justify-content: center;">
@@ -22,6 +24,7 @@
 		data(){
 			return {
 				fileUrl:'/static/temp/test.mp4',
+				initTime:20,
 				title:'测试播放',
 				author:'',
 			}
@@ -51,6 +54,9 @@
 			},
 			videoPlaying(){
 				console.log('videoPlaying');
+			},
+			videoScreen(e){
+				console.log('全屏',e);
 			}
 		}
 	}