2.2提交
This commit is contained in:
zoujiandong
@@ -0,0 +1,299 @@
|
||||
<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>
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="img-grid">
|
||||
<view
|
||||
v-if="tempImageList.length>0"
|
||||
v-for="(img, index) in tempImageList"
|
||||
:key="index"
|
||||
class="img-item"
|
||||
@click="preview(index)"
|
||||
>
|
||||
<image :src="img" mode="aspectFill" class="img" />
|
||||
<view class="del" @click.stop="remove(index)">×</view>
|
||||
</view>
|
||||
<view v-if="tempImageList.length < maxImages" class="img-item add" @click="beforeAddImages">
|
||||
<view class="plus">＋</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { pathToBase64} from "image-tools";
|
||||
import { getCameraPermission } from "@/utils/permission.js";
|
||||
import isAndroid from "@/utils/platform.js";
|
||||
const uuid=ref('');
|
||||
const answer_uuid=ref('');
|
||||
const maxImages = 6;
|
||||
const imgList = ref([]);
|
||||
const isLock=ref(false);
|
||||
const tempImageList = ref([]);
|
||||
const beforeAddImages=()=>{
|
||||
addImages();
|
||||
};
|
||||
const addImages=()=>{
|
||||
console.log('执行选择图片')
|
||||
uni.chooseImage({
|
||||
count:6,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album','camera'],
|
||||
success: (res)=>{
|
||||
uni.showToast({
|
||||
title: '选择图片成功',
|
||||
icon: 'none'
|
||||
})
|
||||
//console.log(res.tempFilePaths)
|
||||
// tempImageList.value = [...tempImageList.value, ...res.tempFilePaths];
|
||||
// for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||||
// pathToBase64(res.tempFilePaths[i])
|
||||
// .then((base64) => {
|
||||
// console.log('转base64成功')
|
||||
// imgList.value.push(base64.split(',')[1]);
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log('转base64失败')
|
||||
// console.error(error);
|
||||
// });
|
||||
// }
|
||||
// console.log(tempImageList.value)
|
||||
// console.log(imgList.value)
|
||||
},
|
||||
fail: (err)=>{
|
||||
console.log(err)
|
||||
uni.showToast({
|
||||
title: '选择图片失败:'+err.errMsg,
|
||||
icon: 'none'
|
||||
})
|
||||
//console.log('选择图片失败:'+err.errMsg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function preview(index){
|
||||
uni.previewImage({
|
||||
urls:tempImageList.value,
|
||||
current: index
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content{
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.img-grid{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16rpx;
|
||||
}
|
||||
.img-item{
|
||||
position: relative;
|
||||
width:150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.img{ width: 100%; height: 100%; }
|
||||
.add{ display:flex; align-items:center; justify-content:center;}
|
||||
.plus{ font-size: 80rpx; color:#c0c0c0; line-height: 1; }
|
||||
.del{
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 22rpx;
|
||||
background: rgba(0,0,0,.5);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 44rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user