uniapp-app/pages/upload/upload.nvue

<template>
	<view class="wrap">
		<view :class="isFull ? 'player-full' : 'player'">
			<plv-player
				ref="vodPlayer"
				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="skinRef"
				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 setup>
      import { ref } from 'vue';
	  import { onShow } from '@dcloudio/uni-app';
	//import Head from '../../components/page-head.nvue';
	//import skin from '@/components/plv-player-skin/skin.nvue';
	//import DragTips from '@/components/plv-player-skin/drag-tips.nvue';	
	const dom = weex.requireModule('dom');
	var configModule = uni.requireNativePlugin("PLV-VodUniPlugin-ConfigModule")
	const vod=ref(null);

	const title='播放器Demo';
				// 播放器组件
	const vodPlayer=ref(null);
	const skinRef=ref(null);
	const isFull=ref(false);
	const defaultVolume=ref(0.5);
	const videoVid=ref('4ae3fe3ab5a2009a8d6605d81b2e3c9b_4');

	onShow(() => {
		configModule.setConfig({
			'config': "dDzXiPJ8psA/7LvtlPgpNfdOjzKVVEYvca1QBOp2MqCVKC93YiligqqfzOzETkDmolLNBUF4vAykBuUnn+U4V9NoK9vaofwESluIMO9WSB0eWhrw+fBkn+h+OZAmwmYgHQ6fCtsggZKN6cW/FhjWAQ==", //加密串配置
		},
		(ret) => {
			if (ret.isSuccess == true) {
				uni.showToast({
					title: '设置加密串成功',
					icon: "none"
				})
			}
		})
	})
	const onVidInput=(event)=> {
				videoVid.value = event.detail.value;
			};



			const setVid=()=> {
				if(!videoVid.value) {
					uni.showToast({
						title: "请输入视频Vid",
						icon: "none"
					})
					return;
				}
				
				vodPlayer.value.setVid({
					vid:videoVid.value,
					level:0
				}, (ret) => {
					console.log(12)
					console.log(ret)
					text.value = JSON.stringify(ret);
					if (ret.errMsg != null) {
						uni.showToast({
							title: ret.errMsg,
							icon: "none"
						})
					}
				});
			};

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

			const positionChange=(e)=>{
				skinRef.value.timeUpdate(e.detail.currentPosition);
			};
			
			const onEnableSubtitle=(e)=>{
				console.log("===1" + e.detail);
				skinRef.value.setEnableSubtitle(e.detail.isEnableSubtitle, e.detail.isEnableDoubleSubtitle);
			};
			
			const onSRTTextConfig=(e)=>{
				console.log("===1 fontColor: " + e.detail.fontColor);
				skinRef.value.setSRTTextConfig(e.detail);
			};
			
			 const onSRTTitle=(e)=>{
				console.log("===1 onSRTTitle" + e.detail);
				
			};

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

			const onPlayBtnClick=(isPlaying)=> {
				if (vodPlayer.value) return;
				isPlaying ? vodPlayer.value.start() : vodPlayer.value.pause();
			};
			
			const onHdBtnClick=(level)=> {
				if (vodPlayer.value) return;
				vodPlayer.value.changeLevel({level});
			};
			
			const onRateBtnClick=(speed)=> {
				if (vodPlayer.value) return;
				vodPlayer.value.setSpeed({speed});
			};
			
			const onScalingBtnClick=(scalingMode)=> {
				if (vodPlayer.value) return;
				vodPlayer.value.setScalingMode({scalingMode});
			};
			
			const onChangeSRTBtnClick=(srt)=> {
				console.log("===1 " + srt);
				if (vodPlayer.value) return;
				vodPlayer.value.changeSRT(srt);
			};
			
			const onChangeSRTSingleMode=(isSingle)=> {
				if (vodPlayer.value) return;
				vodPlayer.value.changeSRTSingleMode(isSingle);
			};
			
			const onOpenSRT=(isOpen)=> {
				if (vodPlayer.value) return;
				vodPlayer.value.setOpenSRT({
					openSrt: isOpen
					});
			};
			
			const onFullBtnClick=(isFull)=> {
				// plus.screen.unlockOrientation();
				plus.navigator.setFullscreen(isFull);
				if (vodPlayer.value) return;
				isFull ? vodPlayer.value.changeToLandscape() : vodPlayer.value.changeToPortrait();
				isFull.value = isFull;
			};
			
				const onToSeek=(time)=> {
				
				if (vodPlayer.value) return;
				vodPlayer.value.seekTo({seconds: time});
			};
			
			const onVolumeChanged=(value)=> {
				
					if (vodPlayer.value) return;
				vodPlayer.value.getVolume(null, ret => {
					const changedValue = ret.volume + value;
					
					const realValue =limit(changedValue, 0, 1);
					
					vodPlayer.value.setVolume({volume: realValue});
					
					skinRef.value.updateVolumeValue(realValue);
				});
			};
			
			const onScreenShot=()=> {
				if (vodPlayer.value) return;
				
				vodPlayer.value.snapshot(null, result =>{
					if(result.errMsg != null){
						console.log(result.errMsg)
					}
				});
			};
			
			/**
			* 控制最小值，最大值
			* @param num
			* @param min
			* @param max
			* @returns {*}
			*/
			const 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>