uniapp-app/components/uniVideo/uniVideo.vue

<template>
	<view class="wrap">
		<view :class="isFull ? 'player-full' : 'player'">
			<plv-player
				ref="vod"
				class="vod-player"
				seekType=1
				autoPlay=true
				disableScreenCAP=false
				rememberLastPosition=false
				@onPlayStatus="onPlayStatus"
				@onPlayError="onPlayError"
				@positionChange="positionChange"
				@onEnableSubtitle="onEnableSubtitle"
				@onSRTTextConfig="onSRTTextConfig"
				@onSRTTitle="onSRTTitle">
			</plv-player>
			<skin ref="skin"
				class="skin-control"
				:defaultVolume="defaultVolume"
				@onPlayBtnClick="onPlayBtnClick"
				@onToSeek="onToSeek"
				@onFullBtnClick="onFullBtnClick"
				@onHdBtnClick="onHdBtnClick"
				@onRateBtnClick="onRateBtnClick"
				@onVolumeChanged="onVolumeChanged"
				@onScalingBtnClick="onScalingBtnClick"
				@onScreenShot="onScreenShot"
				@onChangeSRTBtnClick="onChangeSRTBtnClick"
				@onChangeSRTSingleMode="onChangeSRTSingleMode"
				@onOpenSRT="onOpenSRT">
			</skin>
		</view>
		<view v-if="!isFull" style="padding: 20rpx;">
			<input class="uni-input" style="min-height: 35px; height: 35px; border: 1px solid #cccccc;font-size: 14px;" :value="videoVid"
			 @input="onVidInput" placeholder="请输入视频vid" />
			<button type="primary" @click="setVid()">播放</button>
		</view>
	</view>
</template>

<script>
	
	import Skin from '@/components/plv-player-skin/skin.nvue';
	import DragTips from '@/components/plv-player-skin/drag-tips.nvue';	
	const dom = weex.requireModule('dom');
	
	export default {
		components: {
			Skin
		},
		
		onReady() {
			this.vodPlayer = this.$refs.vod;
			this.skin = this.$refs.skin;
			// plus.screen.lockOrientation('portrait-primary');
		},

		data() {
			return {
				title: '播放器Demo',
				// 播放器组件
				vodPlayer: null,
				// 控制栏组件
				skin: null,
				//是否全屏
				isFull: false,
				// 默认音量
				defaultVolume: 0.5,
				videoVid: 'cfb7a69a75b5004ddb137d7bd96aa7d7_c'
			};
		},

		methods: {
			//输入vid
			onVidInput: function(event) {
				this.videoVid = event.detail.value;
			},
			
			setVid() {
				if(!this.videoVid) {
					uni.showToast({
						title: "请输入视频Vid",
						icon: "none"
					})
					return;
				}
				const { vodPlayer } = this;
				vodPlayer.setVid({
					vid:this.videoVid,
					level:0
				}, (ret) => {
					this.text = JSON.stringify(ret);
					if (ret.errMsg != null) {
						uni.showToast({
							title: ret.errMsg,
							icon: "none"
						})
					}
				});
			},

			onPlayError(e){
				if (e.detail.errEvent != null) {
					uni.showToast({
						title:'playErrorEvent - '+e.detail.errEvent,
						icon: "none"
					})
				}
			},

			positionChange(e){
				this.skin.timeUpdate(e.detail.currentPosition);
			},
			
			onEnableSubtitle(e){
				console.log("===1" + e.detail);
				this.skin.setEnableSubtitle(e.detail.isEnableSubtitle, e.detail.isEnableDoubleSubtitle);
			},
			
			onSRTTextConfig(e) {
				console.log("===1 fontColor: " + e.detail.fontColor);
				this.skit.setSRTTextConfig(e.detail);
			},
			
			onSRTTitle(e) {
				console.log("===1 onSRTTitle" + e.detail);
				
			},

			onPlayStatus(e){
				const { skin, vodPlayer } = this;
				const state = e.detail.playbackState;
				const preparedToPlay = e.detail.preparedToPlay;
				if (state != null) {
					this.skin.changePlayStatus(state === 'start');
				} else if (preparedToPlay != null) {
					this.updateDuration();
					this.updateLevels();
					this.updateScaling();
				}
			},
			
			updateDuration() {
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				vodPlayer.getDuration(null, ret => {
					this.skin.updateDuration(ret.duration);
				});
			},
			
			updateLevels() {
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				
				vodPlayer.getLevelNum(null, ret => {
					this.skin.updateLevels(ret.levelNum);
				});
				
				vodPlayer.getCurrentLevel(null, ret => {
					this.skin.updateCurrentLevel(ret.currentLevel);
				});
			},
			
			updateScaling() {
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				
				vodPlayer.getScalingMode({}, ret => {
					this.skin.updateScaling(ret.scalingMode);
				});
			},

			onPlayBtnClick(isPlaying) {
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				isPlaying ? vodPlayer.start() : vodPlayer.pause();
			},
			
			onHdBtnClick(level) {
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				vodPlayer.changeLevel({level});
			},
			
			onRateBtnClick(speed) {
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				vodPlayer.setSpeed({speed});
			},
			
			onScalingBtnClick(scalingMode) {
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				vodPlayer.setScalingMode({scalingMode});
			},
			
			onChangeSRTBtnClick(srt) {
				console.log("===1 " + srt);
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				vodPlayer.changeSRT(srt);
			},
			
			onChangeSRTSingleMode(isSingle) {
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				vodPlayer.changeSRTSingleMode(isSingle);
			},
			
			onOpenSRT(isOpen) {
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				vodPlayer.setOpenSRT({
					openSrt: isOpen
					});
			},
			
			onFullBtnClick(isFull) {
				// plus.screen.unlockOrientation();
				plus.navigator.setFullscreen(isFull);

				//通过h5+实现横竖屏
				// isFull ? plus.screen.lockOrientation('landscape-primary') : plus.screen.lockOrientation('portrait-primary');
				
				//通过原生实现横竖屏切换
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				isFull ? vodPlayer.changeToLandscape() : vodPlayer.changeToPortrait();
				
				this.isFull = isFull;
			},
			
			onToSeek(time) {
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				vodPlayer.seekTo({seconds: time});
			},
			
			onVolumeChanged(value) {
				const { vodPlayer, skin } = this;
				if (!vodPlayer) return;
				vodPlayer.getVolume(null, ret => {
					const changedValue = ret.volume + value;
					
					const realValue = this.limit(changedValue, 0, 1);
					
					vodPlayer.setVolume({volume: realValue});
					
					skin.updateVolumeValue(realValue);
				});
			},
			
			onScreenShot() {
				const { vodPlayer } = this;
				if (!vodPlayer) return;
				
				vodPlayer.snapshot(null, result =>{
					if(result.errMsg != null){
						console.log(result.errMsg)
					}
				});
			},
			
			/**
			* 控制最小值，最大值
			* @param num
			* @param min
			* @param max
			* @returns {*}
			*/
			limit(num, min, max) {
				if (num < min) return min;
				if (num > max) return max;
				return num;
			}
		}
	}
</script>

<style>
	.wrap {
		flex: 1;
	}
	
	.title {
		height: 140rpx;
	}
	
	.player {
		height: 400rpx;
	}

	.player-full {
		flex: 1;
	}
	
	.vod-player {
		flex: 1;
	}
	
	.skin-control {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	
	.hide {
		height: 0;
	}
	
</style>