保利视频
This commit is contained in:
zoujiandong
@@ -0,0 +1,337 @@
|
||||
<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 Head from '../../components/page-head.nvue';
|
||||
import Skin from '@/components/plv-player-skin2/skin.nvue';
|
||||
//import DragTips from '@/components/plv-player-skin/drag-tips.nvue';
|
||||
const dom = weex.requireModule('dom');
|
||||
var configModule = uni.requireNativePlugin("PLV-VodUniPlugin-ConfigModule")
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Skin,
|
||||
//Head
|
||||
},
|
||||
|
||||
onReady() {
|
||||
configModule.setConfig({
|
||||
'config': "dDzXiPJ8psA/7LvtlPgpNfdOjzKVVEYvca1QBOp2MqCVKC93YiligqqfzOzETkDmolLNBUF4vAykBuUnn+U4V9NoK9vaofwESluIMO9WSB0eWhrw+fBkn+h+OZAmwmYgHQ6fCtsggZKN6cW/FhjWAQ==", //加密串配置
|
||||
},
|
||||
(ret) => {
|
||||
if (ret.isSuccess == true) {
|
||||
uni.showToast({
|
||||
title: '设置加密串成功',
|
||||
icon: "none"
|
||||
})
|
||||
} else {
|
||||
let errMsg = ret.errMsg;
|
||||
uni.showToast({
|
||||
title: '设置加密串失败：' + errMsg,
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
})
|
||||
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: '4ae3fe3ab5a2009a8d6605d81b2e3c9b_4'
|
||||
};
|
||||
},
|
||||
|
||||
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) => {
|
||||
console.log(12)
|
||||
console.log(ret)
|
||||
this.text = JSON.stringify(ret);
|
||||
if (ret.errMsg != null) {
|
||||
uni.showToast({
|
||||
title: ret.errMsg,
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onPlayError(e){
|
||||
console.log(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>
|
||||
Reference in New Issue
Block a user