保利视频
This commit is contained in:
zoujiandong
parent
a7b2a673a9
commit
db9ca707ae
97
components/plv-player-skin2/drag-tips.nvue
Normal file
97
components/plv-player-skin2/drag-tips.nvue
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
/**
|
||||||
|
* @file 拖动进度提示组件
|
||||||
|
*/
|
||||||
|
<template>
|
||||||
|
<view class="plv-player-drag-tips">
|
||||||
|
<view class="plv-player-drag-tips__box">
|
||||||
|
<image class="plv-player-drag-tips__direction-img" :src="imgSrc"
|
||||||
|
@error="imageError">
|
||||||
|
</image>
|
||||||
|
<text class="plv-player-drag-tips__time">
|
||||||
|
{{changeTimeFormat}} / {{durationFormat}}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import utils from '@/common/util.js';
|
||||||
|
import backImg from '@/static/skin/back.png';
|
||||||
|
import forwardImg from '@/static/skin/forward.png'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
currentTime: {
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
|
||||||
|
duration: {
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
|
||||||
|
changeTime: {
|
||||||
|
type: Number
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isForward: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
changeTime(newValue, oldValue){
|
||||||
|
this.isForward = newValue > oldValue;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
timeFormatType() {
|
||||||
|
this.duration >= 3600 ? 2 : 1;
|
||||||
|
},
|
||||||
|
|
||||||
|
changeTimeFormat() {
|
||||||
|
return utils.formatTimeByDuration(this.changeTime, this.timeFormatType);
|
||||||
|
},
|
||||||
|
|
||||||
|
durationFormat() {
|
||||||
|
return utils.formatTimeByDuration(this.duration, this.timeFormatType)
|
||||||
|
},
|
||||||
|
|
||||||
|
imgSrc() {
|
||||||
|
return this.isForward ? forwardImg : backImg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.plv-player-drag-tips {
|
||||||
|
width: 250rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
background: rgba(0,0,0,.7);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plv-player-drag-tips__box {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plv-player-drag-tips__direction-img {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plv-player-drag-tips__time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
271
components/plv-player-skin2/gesture.nvue
Normal file
271
components/plv-player-skin2/gesture.nvue
Normal file
@ -0,0 +1,271 @@
|
|||||||
|
<template>
|
||||||
|
<view class="plv-player-gesture"
|
||||||
|
@touchstart="touchstart"
|
||||||
|
@touchmove="touchmove"
|
||||||
|
@longpress="handleLongPress"
|
||||||
|
@touchcancel="handleTouchCancel"
|
||||||
|
@touchend="touchend">
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 屏幕宽度（物理像素）
|
||||||
|
holeWidth: Number,
|
||||||
|
// 视频总时长
|
||||||
|
duration: Number,
|
||||||
|
// 视频当前播放时间
|
||||||
|
currentTime: Number
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
halfWidth() {
|
||||||
|
return parseInt(this.holeWidth / 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 是否在左区域按下手势
|
||||||
|
downLeft: false,
|
||||||
|
// 滑动方向
|
||||||
|
swipeDir: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.addHandler();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods:{
|
||||||
|
addHandler() {
|
||||||
|
// 增加父容器左右滑动监听
|
||||||
|
let finalTime = -1;
|
||||||
|
// 计算左右滑动seek进度
|
||||||
|
const countTime = (position) => {
|
||||||
|
const { holeWidth, duration, currentTime } = this;
|
||||||
|
const precent = Math.abs(position) / holeWidth;
|
||||||
|
const nowTime = currentTime || 0;
|
||||||
|
const constSecond = duration < 60 ? duration : 60;
|
||||||
|
let plusTime = parseInt(Math.abs(precent * constSecond));
|
||||||
|
if (position < 0) plusTime = plusTime * -1;
|
||||||
|
finalTime = nowTime + plusTime;
|
||||||
|
finalTime = this.limit(finalTime, 0, duration);
|
||||||
|
return finalTime;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.addGesture((type, position) => {
|
||||||
|
switch (type) {
|
||||||
|
// 下滑
|
||||||
|
case -1:
|
||||||
|
// console.log('//下滑');
|
||||||
|
this.$emit('onGestureEvent', {
|
||||||
|
type: this.downLeft ? 'LEFT_DOWN' : 'RIGHT_DOWN',
|
||||||
|
position
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
// 上滑
|
||||||
|
case -2:
|
||||||
|
// console.log('//上滑');
|
||||||
|
this.$emit('onGestureEvent', {
|
||||||
|
type: this.downLeft ? 'LEFT_UP' : 'RIGHT_UP',
|
||||||
|
position
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
// 左滑
|
||||||
|
case 0:
|
||||||
|
// console.log('//左滑');
|
||||||
|
this.swipeDir = type;
|
||||||
|
countTime(position);
|
||||||
|
this.$emit('onGestureEvent', {
|
||||||
|
type: 'SEEK_TIME_UPDATE',
|
||||||
|
finalTime
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
// 右滑
|
||||||
|
case 1:
|
||||||
|
// console.log('//右滑');
|
||||||
|
this.swipeDir = type;
|
||||||
|
countTime(position);
|
||||||
|
this.$emit('onGestureEvent', {
|
||||||
|
type: 'SEEK_TIME_UPDATE',
|
||||||
|
finalTime
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
// touchend for swipe
|
||||||
|
case 3:
|
||||||
|
if (this.swipeDir > -1) {
|
||||||
|
this.$emit('onGestureEvent', {
|
||||||
|
type: this.swipeDir ? 'SWIPE_RIGHT' : 'SWIPE_LEFT'
|
||||||
|
});
|
||||||
|
this.swipeDir = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (finalTime > -1) {
|
||||||
|
this.$emit('onGestureSeekTo', finalTime);
|
||||||
|
finalTime = -1;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
// doubleTap
|
||||||
|
case 4:
|
||||||
|
// console.log('>>>> 双击');
|
||||||
|
this.$emit('onGestureEvent', {
|
||||||
|
type: 'DOUBLE_CLICK'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
// tap
|
||||||
|
case 5:
|
||||||
|
// console.log('>>>> 单击');
|
||||||
|
this.handleClick();
|
||||||
|
break;
|
||||||
|
// longTap
|
||||||
|
case 6:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
addGesture(callback) {
|
||||||
|
const { options } = this;
|
||||||
|
let startX, startY, moveEndX, moveEndY, X, Y, position, hasType;
|
||||||
|
let T, lastTap, isJustTouch = true;
|
||||||
|
|
||||||
|
|
||||||
|
const excuteCb = (type) => {
|
||||||
|
// type 手势类型 -2 上滑 -1 下滑 0 左滑 1 右滑 2 just touch 3 touchend 4 doubleTap 5 tap 6 longTap
|
||||||
|
if (callback && typeof callback === 'function')
|
||||||
|
callback(type, position);
|
||||||
|
};
|
||||||
|
|
||||||
|
const YPlus = 20;
|
||||||
|
const YReduce = YPlus * -1;
|
||||||
|
const XPlus = 50;
|
||||||
|
const XReduce = XPlus * -1;
|
||||||
|
|
||||||
|
const isXchange = () => {
|
||||||
|
if (X > XPlus || X < XReduce) {
|
||||||
|
position = X;
|
||||||
|
hasType = 'X';
|
||||||
|
isJustTouch = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (X > XPlus) excuteCb(1);
|
||||||
|
// 左滑
|
||||||
|
else if (X < XReduce) excuteCb(0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isYchange = () => {
|
||||||
|
if (Y > YPlus || Y < YReduce) {
|
||||||
|
position = Y;
|
||||||
|
hasType = 'Y';
|
||||||
|
isJustTouch = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Y > YPlus) excuteCb(-1);
|
||||||
|
// 上滑
|
||||||
|
else if (Y < YReduce) excuteCb(-2);
|
||||||
|
};
|
||||||
|
|
||||||
|
const countDirect = () => {
|
||||||
|
if (hasType) {
|
||||||
|
hasType === 'X' ? isXchange() : isYchange();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
isXchange();
|
||||||
|
isYchange();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.handleTouch = (type, e) => {
|
||||||
|
switch(type) {
|
||||||
|
case 'start':
|
||||||
|
startX = e.changedTouches[0].pageX;
|
||||||
|
startY = e.changedTouches[0].pageY;
|
||||||
|
T = Date.now();
|
||||||
|
hasType = '';
|
||||||
|
isJustTouch = true;
|
||||||
|
this.downLeft = startX < this.halfWidth ? true : false;
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 'move':
|
||||||
|
moveEndX = e.changedTouches[0].pageX;
|
||||||
|
moveEndY = e.changedTouches[0].pageY;
|
||||||
|
X = moveEndX - startX;
|
||||||
|
Y = moveEndY - startY;
|
||||||
|
countDirect();
|
||||||
|
break;
|
||||||
|
case 'end':
|
||||||
|
if (isJustTouch)
|
||||||
|
if (lastTap && Date.now() - lastTap <= 300)
|
||||||
|
excuteCb(4);
|
||||||
|
else if (Date.now() - T < 1000)
|
||||||
|
excuteCb(5);
|
||||||
|
else
|
||||||
|
excuteCb(6);
|
||||||
|
else
|
||||||
|
excuteCb(3);
|
||||||
|
|
||||||
|
lastTap = Date.now();
|
||||||
|
isJustTouch = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
handleClick() {
|
||||||
|
this.$emit('onGestureClick');
|
||||||
|
},
|
||||||
|
|
||||||
|
touchstart(e) {
|
||||||
|
this.handleTouch('start', e);
|
||||||
|
},
|
||||||
|
|
||||||
|
touchmove(e) {
|
||||||
|
this.handleTouch('move', e);
|
||||||
|
},
|
||||||
|
|
||||||
|
touchend(e) {
|
||||||
|
this.handleTouch('end', e);
|
||||||
|
this.$emit('onTouchEnd');
|
||||||
|
},
|
||||||
|
|
||||||
|
handleTouchCancel() {
|
||||||
|
this.$emit('onTouchCancel');
|
||||||
|
},
|
||||||
|
|
||||||
|
handleLongPress() {
|
||||||
|
this.$emit('onLongPress');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 控制最小值，最大值
|
||||||
|
* @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>
|
||||||
|
.plv-player-gesture {
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plv-player-gesture__left {
|
||||||
|
flex: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plv-player-gesture__right {
|
||||||
|
flex: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
68
components/plv-player-skin2/light.nvue
Normal file
68
components/plv-player-skin2/light.nvue
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="isShow" class="plv-player-icon">
|
||||||
|
<image class="plv-player-icon__img" :src="imgUrl"></image>
|
||||||
|
<text class="plv-player-icon__text">{{ precent + '%' }}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
imgUrl: {
|
||||||
|
type: 'string',
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
precent: {
|
||||||
|
type: 'Number',
|
||||||
|
default: 100,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
precent(num) {
|
||||||
|
if (!this.isShow) this.isShow = true;
|
||||||
|
this.startClock();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
startClock() {
|
||||||
|
this.clearClock();
|
||||||
|
|
||||||
|
this.clock = setTimeout(() => {
|
||||||
|
this.isShow = false;
|
||||||
|
}, 1500);
|
||||||
|
},
|
||||||
|
|
||||||
|
clearClock() {
|
||||||
|
if (this.clock) clearTimeout(this.clock);
|
||||||
|
this.clock = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.plv-player-icon {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plv-player-icon__img {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plv-player-icon__text {
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
1204
components/plv-player-skin2/skin.nvue
Normal file
1204
components/plv-player-skin2/skin.nvue
Normal file
File diff suppressed because it is too large
Load Diff
92
components/plv-player-skin2/volume.nvue
Normal file
92
components/plv-player-skin2/volume.nvue
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="isShow" class="plv-player-volume-wrap">
|
||||||
|
<image class="plv-player-volume__img" :src="value === 0 ? muteImgUrl : imgUrl "></image>
|
||||||
|
<view class="plv-player-volume__progress">
|
||||||
|
<view class="plv-player-volume__progress__played" :style="'flex:' + value"></view>
|
||||||
|
<view class="plv-player-volume__progress_surplus" :style="'flex:' + valueLeft"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
imgUrl: {
|
||||||
|
type: 'string',
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
muteImgUrl: {
|
||||||
|
type: 'string',
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: 'Number',
|
||||||
|
default: 0.5,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
value(num) {
|
||||||
|
if (!this.isShow) this.isShow = true;
|
||||||
|
this.startClock();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
valueLeft() {
|
||||||
|
return 1 - this.value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
startClock() {
|
||||||
|
this.clearClock();
|
||||||
|
|
||||||
|
this.clock = setTimeout(() => {
|
||||||
|
this.isShow = false;
|
||||||
|
}, 1500);
|
||||||
|
},
|
||||||
|
|
||||||
|
clearClock() {
|
||||||
|
if (this.clock) clearTimeout(this.clock);
|
||||||
|
this.clock = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.plv-player-volume-wrap {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plv-player-volume__img {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plv-player-volume__progress {
|
||||||
|
width: 260rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
flex-direction: row;
|
||||||
|
background-color: #09BB07;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plv-player-volume__progress__played {
|
||||||
|
background-color: #007AFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plv-player-volume__progress_surplus {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
20
pages.json
20
pages.json
@ -9,16 +9,16 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"pages": [
|
"pages": [
|
||||||
// {
|
{
|
||||||
// "path": "pages/upload/upload",
|
"path": "pages/upload/upload2",
|
||||||
// "style": {
|
"style": {
|
||||||
// "navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
// "navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
// "app": {
|
"app": {
|
||||||
// "bounce": "none"
|
"bounce": "none"
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// },
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/loading/loading",
|
"path": "pages/loading/loading",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
337
pages/upload/upload2.nvue
Normal file
337
pages/upload/upload2.nvue
Normal file
@ -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>
|
||||||
@ -19,7 +19,7 @@
|
|||||||
<view class="top-banner" @click="goWelfare" v-if="hasCard">
|
<view class="top-banner" @click="goWelfare" v-if="hasCard">
|
||||||
<image :src="bgImg" mode="widthFix" class="bg-img"></image>
|
<image :src="bgImg" mode="widthFix" class="bg-img"></image>
|
||||||
<view class="banner-text">
|
<view class="banner-text">
|
||||||
<view class="line1">已兑换{{ cardInfo.length }}张</view>
|
<view class="line1">已兑换{{ totalCount}}张</view>
|
||||||
<view class="line2" @click.stop="goWelfare">查看现有权益</view>
|
<view class="line2" @click.stop="goWelfare">查看现有权益</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="help-btn" @click.stop="showRules">帮助说明</view>
|
<view class="help-btn" @click.stop="showRules">帮助说明</view>
|
||||||
@ -129,7 +129,7 @@
|
|||||||
import rightImg from '@/static/right_selsect_big.png'
|
import rightImg from '@/static/right_selsect_big.png'
|
||||||
import empty from '@/components/empty/empty.vue'
|
import empty from '@/components/empty/empty.vue'
|
||||||
import { onLoad,onBackPress } from '@dcloudio/uni-app'
|
import { onLoad,onBackPress } from '@dcloudio/uni-app'
|
||||||
|
const totalCount = ref(0);
|
||||||
const from=ref('');
|
const from=ref('');
|
||||||
onBackPress(() => {
|
onBackPress(() => {
|
||||||
if(!from.value){
|
if(!from.value){
|
||||||
@ -171,6 +171,7 @@
|
|||||||
} else {
|
} else {
|
||||||
cardInfo.value = pageNum.value === 1 ? list : cardInfo.value.concat(list)
|
cardInfo.value = pageNum.value === 1 ? list : cardInfo.value.concat(list)
|
||||||
}
|
}
|
||||||
|
totalCount.value = res.data.total;
|
||||||
hasCard.value = list.length > 0 || cardInfo.value.length > 0
|
hasCard.value = list.length > 0 || cardInfo.value.length > 0
|
||||||
isLastPage.value = !!res.data.isLastPage
|
isLastPage.value = !!res.data.isLastPage
|
||||||
}
|
}
|
||||||
@ -221,7 +222,7 @@
|
|||||||
|
|
||||||
const goPointsDetail = () => {
|
const goPointsDetail = () => {
|
||||||
console.log('goPointsDetail')
|
console.log('goPointsDetail')
|
||||||
uni.navigateTo({ url: '/pages_app/myWelfareCard/exchange?num='+cardInfo.value.length })
|
uni.navigateTo({ url: '/pages_app/myWelfareCard/exchange?num='+totalCount.value })
|
||||||
};
|
};
|
||||||
|
|
||||||
const goMyWelfare = () => {
|
const goMyWelfare = () => {
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
|
|
||||||
//let BASE_URL='https://dev-app.igandan.com/app';
|
let BASE_URL='https://dev-app.igandan.com/app';
|
||||||
let BASE_URL='https://app.igandan.com/app'
|
//let BASE_URL='https://app.igandan.com/app'
|
||||||
export default BASE_URL
|
export default BASE_URL
|
||||||
@ -1,5 +1,5 @@
|
|||||||
//let DOC_URL='https://dev-doc.igandan.com/app/';
|
let DOC_URL='https://dev-doc.igandan.com/app/';
|
||||||
let DOC_URL='https://doc.igandan.com/app/'
|
//let DOC_URL='https://doc.igandan.com/app/'
|
||||||
// if(app.globalData.apiHost.indexOf('dev')>-1){
|
// if(app.globalData.apiHost.indexOf('dev')>-1){
|
||||||
// DOC_URL='https://dev-doc.igandan.com/app/'
|
// DOC_URL='https://dev-doc.igandan.com/app/'
|
||||||
// }else{
|
// }else{
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
//let OTHER_HOST='https://dev-wx.igandan.com'
|
let OTHER_HOST='https://dev-wx.igandan.com'
|
||||||
let OTHER_HOST='https://wx.igandan.com'
|
//let OTHER_HOST='https://wx.igandan.com'
|
||||||
//const app = getApp({allowDefault: true});
|
//const app = getApp({allowDefault: true});
|
||||||
// if(app.globalData.apiHost && app.globalData.apiHost.indexOf('dev')>-1){
|
// if(app.globalData.apiHost && app.globalData.apiHost.indexOf('dev')>-1){
|
||||||
// OTHER_HOST='https://dev-wx.igandan.com'
|
// OTHER_HOST='https://dev-wx.igandan.com'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user