1205 lines
29 KiB
Plaintext
1205 lines
29 KiB
Plaintext
<template>
|
||
<view class="skin-wrap">
|
||
<view class="plv-player-comp-box" :style="{
|
||
'width': (holeWidth) + 'px'
|
||
}">
|
||
<view class="plv-player-longpress-speed" v-if="isInLongPress && !isLock">
|
||
<image class="plv-player-longpress-speed__image" src="@/static/skin/forward.png"></image>
|
||
<text class="plv-player-longpress-speed__text">快进x2.0</text>
|
||
</view>
|
||
<drag-tips class="plv-player-skin-drag-tips" v-if="showGestureSeekTips" :duration="duration" :changeTime="gestureChangeSeekTime" :currentTime="currentTime"></drag-tips>
|
||
</view>
|
||
<gesture class="plv-player-mask"
|
||
:holeWidth="holeWidth"
|
||
:duration="duration"
|
||
:currentTime="currentTime"
|
||
@onLongPress="handleLongPress"
|
||
@onTouchCancel="handleTouchCancel"
|
||
@onGestureClick="handleMask"
|
||
@onTouchEnd="handleTouchEnd"
|
||
@onGestureSeekTo="handleSeekTo"
|
||
@onGestureEvent="handleGEvent">
|
||
</gesture>
|
||
<light class="plv-player-light" :imgUrl="lightImg" :precent="lightPrecent"></light>
|
||
<volume class="plv-player-volume" :imgUrl="volumeImg" :muteImgUrl="volumeMuteImg" :value="volumeValue"></volume>
|
||
<view class="plv-player-subtitle-view" v-if="isShowSubtitle">
|
||
<text v-if="isShowDoubleSubTitle" :style="{ fontWeight: topSubtitle.isBold? 'bold' : 'normal',
|
||
fontStyle: topSubtitle.isItalic? 'italic' : 'normal', color: topSubtitle.fontColor,
|
||
backgroundColor: topSubtitle.bgColor, fontSize: topSubtitle.fontSize }">{{topSubtitle.text}}</text>
|
||
<text v-if="isShowDoubleSubTitle" :style="{ fontWeight: bottomSubtitle.isBold? 'bold' : 'normal',
|
||
fontStyle: bottomSubtitle.isItalic? 'italic' : 'normal', color: bottomSubtitle.fontColor,
|
||
backgroundColor: bottomSubtitle.bgColor, fontSize: bottomSubtitle.fontSize }">{{bottomSubtitle.text}}</text>
|
||
<text v-else="isShowSingleSubTitle" :style="{ fontWeight: singleSubtitle.isBold? 'bold' : 'normal',
|
||
fontStyle: singleSubtitle.isItalic? 'italic' : 'normal', color: singleSubtitle.fontColor,
|
||
backgroundColor: singleSubtitle.bgColor, fontSize: singleSubtitle.fontSize }">{{singleSubtitle.text}}</text>
|
||
</view>
|
||
<view class="plv-player-bar" v-if="!selectStatus && showBar && !isLock">
|
||
<image class="plv-player-bar__bg" :src="bottomBar"></image>
|
||
<view class="plv-player-bar__box">
|
||
<view class="plv-player-mr-left"></view>
|
||
<view class="plv-player-middle">
|
||
<view class="plv-player-progress">
|
||
<view class="plv-player-progress__play__wrap">
|
||
<view class="plv-player-progress__wrap__played" :style="'flex:' + progressPrecent"></view>
|
||
<view class="plv-player-progress__wrap__surplus" :style="'flex:' + progressLeftOverPrecent"></view>
|
||
</view>
|
||
<view class="plv-player-progress__dot__wrap">
|
||
<view class="plv-player-progress__dot__box">
|
||
<view class="plv-player-progress__dot__played" :style="'flex:' + (progressPrecent || 1)">
|
||
<view class="plv-player-progress__dot"></view>
|
||
</view>
|
||
<view class="plv-player-progress__dot__surplus" :style="'flex:' + progressLeftOverPrecent"></view>
|
||
</view>
|
||
</view>
|
||
<view class="plv-player-progress__mask"
|
||
@touchstart="touchstart"
|
||
@touchmove="touchmove"
|
||
@touchend="touchend"></view>
|
||
</view>
|
||
<view class="plv-player-bar-bottom">
|
||
<image class="plv-btn plv-player-play-btn" :src=playBtnLink @click="handlePlay"></image>
|
||
<view class="plv-player-time">
|
||
<text class="plv-player-btn__text">{{ currentTimeText }}</text>
|
||
<text class="plv-player-btn__text"> / </text>
|
||
<text class="plv-player-btn__text">{{ durationText }}</text>
|
||
</view>
|
||
<image class="plv-btn plv-player-full-btn" :src="fullBtnLink" @click="handleFull"></image>
|
||
<text class="plv-btn plv-player-hd-btn plv-player-btn__text" @click="handleBtn(types.LEVEL)">{{ currentLevelText }}</text>
|
||
<text class="plv-btn plv-player-rate-btn plv-player-btn__text" @click="handleBtn(types.SPEED)">{{ currentSpeedText }}</text>
|
||
<text class="plv-btn plv-player-scaling-btn plv-player-btn__text" @click="handleBtn(types.SCALING)">画面</text>
|
||
<text class="plv-btn plv-player-subtitle-btn plv-player-btn__text"
|
||
v-if="isEnableSubTitle" @click="handleBtn(types.SUBTITLE)">字幕</text>
|
||
</view>
|
||
</view>
|
||
<view class="plv-player-mr-right"></view>
|
||
</view>
|
||
</view>
|
||
<view class="plv-player-select" v-if="selectStatus">
|
||
<view class="plv-player-select__bg"></view>
|
||
<view class="plv-player-select__option">
|
||
<text v-for=" (item, index) in selects"
|
||
:key="index"
|
||
class="plv-player-select__option__item"
|
||
:class="{ 'select-option__text': true, active: index === currentOptionIndex}"
|
||
@click="selectOption(index)">
|
||
{{ item[0] }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="plv-player-screenshot" v-if="!selectStatus && showBar && !isLock" :style="'bottom:' + screenShotY">
|
||
<image class="plv-player-screenshot__btn" :src="screenShotImg" @click="$emit('onScreenShot')"></image>
|
||
</view>
|
||
<view class="plv-player-lock" v-if="!selectStatus && showBar" :style="'bottom:' + screenShotY">
|
||
<image class="plv-player-lock__btn" :src="lockImgSrc" @click="isLock = !isLock"></image>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Gesture from './gesture.nvue';
|
||
import Light from './light.nvue';
|
||
import Volume from './volume.nvue';
|
||
import DragTips from '@/components/plv-player-skin/drag-tips.nvue';
|
||
import LockImg from '@/static/skin/lock.png';
|
||
import UnLockImg from '@/static/skin/unlock.png';
|
||
// 部分img 放到了static/skin目录下
|
||
const imgLink = {
|
||
play: 'https://play1.polyv.net/player2/demo/uniapp/pause-left-btn.png',
|
||
pause: 'https://play1.polyv.net/player2/demo/uniapp/play-left-btn.png',
|
||
full: 'https://play1.polyv.net/player2/demo/uniapp/fullscreen-btn.png',
|
||
normal: 'https://play1.polyv.net/player2/demo/uniapp/normalscreen-btn.png',
|
||
bottomBar: 'https://play1.polyv.net/player2/demo/uniapp/bottombar.png',
|
||
light: 'https://play1.polyv.net/player2/demo/uniapp/light.png',
|
||
volume: 'https://play1.polyv.net/player2/demo/uniapp/volume.png',
|
||
mute: 'https://play1.polyv.net/player2/demo/uniapp/mute.png',
|
||
screenShot: 'https://play1.polyv.net/player2/demo/uniapp/screenShot.png'
|
||
};
|
||
|
||
export default {
|
||
components: {
|
||
Gesture,
|
||
Light,
|
||
Volume,
|
||
DragTips
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
// 是否显示控制栏
|
||
showBar: true,
|
||
// 控制栏自动渐隐时间（单位:秒）
|
||
showBarTime: 10,
|
||
// 播放状态
|
||
playStatus: true,
|
||
// 播放按钮图片
|
||
playBtnLink: imgLink.play,
|
||
// 全屏状态
|
||
fullStatus: false,
|
||
// 全屏按钮图片
|
||
fullBtnLink: imgLink.full,
|
||
// 控制栏渐变背景图
|
||
bottomBar: imgLink.bottomBar,
|
||
// 时间显示块
|
||
timeShowBlock: null,
|
||
// 当前播放时间
|
||
currentTime: null,
|
||
currentTimeText: '00:00',
|
||
// 总时长
|
||
duration: null,
|
||
durationText: null,
|
||
// 播放进度占总时长百分比
|
||
precent: 0,
|
||
// 进度条播放进度计算的百分比
|
||
progressPrecent: 0,
|
||
// 进度条播放进度计算的剩余百分比
|
||
progressLeftOverPrecent: 100,
|
||
// 是否正在拖拽中
|
||
isDraging: false,
|
||
// 选择面板中所有选项
|
||
selects: [],
|
||
// 选择面板是否显示中
|
||
selectStatus: false,
|
||
// 选择面板选中类型 levels:清晰度 speeds:倍速
|
||
types: {
|
||
LEVEL: 'level',
|
||
SPEED: 'speed',
|
||
SCALING: 'scaling',
|
||
SUBTITLE: 'subtitle'
|
||
},
|
||
// 当前选中类型
|
||
type: null,
|
||
// 可选码率
|
||
levels: [
|
||
['自动', 0],
|
||
['流畅', 1],
|
||
['高清', 2],
|
||
['超清', 3]
|
||
],
|
||
// 当前码率
|
||
level: 0,
|
||
// 点击了自动码率选项
|
||
selectedHdAuto: false,
|
||
// 可选倍速
|
||
speeds: [
|
||
['0.5x', 0.5],
|
||
['1x', 1],
|
||
['1.5x', 1.5],
|
||
['2x', 2]
|
||
],
|
||
// 当前倍速
|
||
speed: 1,
|
||
// 亮度图片
|
||
lightImg: imgLink.light,
|
||
// 亮度百分比
|
||
lightPrecent: 0,
|
||
// 音量图片
|
||
volumeImg: imgLink.volume,
|
||
volumeMuteImg: imgLink.mute,
|
||
// 音量值
|
||
volumeValue: 0.5,
|
||
//截图按钮
|
||
screenShotImg: imgLink.screenShot,
|
||
// 截图按钮距离底部高度
|
||
screenShotY: '200rpx',
|
||
|
||
showGestureSeekTips: false,
|
||
// 手势拖动时
|
||
gestureChangeSeekTime: 0,
|
||
|
||
seekedNeedPlay: false,
|
||
// 是否锁屏
|
||
isLock: false,
|
||
// 视频拉伸模式文案
|
||
scalings: [['居中', 0], ['适应', 1], ['填充',2], ['拉伸', 3]],
|
||
// 拉伸模式
|
||
scaling: undefined,
|
||
// 是否处于长按的状态
|
||
isInLongPress: false,
|
||
// 是否开启字幕功能
|
||
isEnableSubTitle: true,
|
||
isEnableDoubleSubTitle: false,
|
||
subtitles: [['不显示',0]],
|
||
isShowSubtitle: false,
|
||
isShowSingleSubTitle: false,
|
||
isShowDoubleSubTitle:false,
|
||
subtitle: 0,
|
||
topSubtitle: {
|
||
text:"",
|
||
isBold: false,
|
||
isItalic: false,
|
||
fontColor:"#fb12d4",
|
||
bgColor:"#67f933",
|
||
fontSize: 14
|
||
},
|
||
bottomSubtitle: {
|
||
text:"",
|
||
isBold: false,
|
||
isItalic: false,
|
||
fontColor:"#ffff00",
|
||
bgColor:"#00f3ff",
|
||
fontSize: 14
|
||
},
|
||
singleSubtitle: {
|
||
text:"",
|
||
isBold: false,
|
||
isItalic: false,
|
||
fontColr:"#ffffff",
|
||
bgColor: "#000000",
|
||
fontSize: 14
|
||
}
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
type() {
|
||
this.selects = this[`${this.type}s`];
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
currentLevelText() {
|
||
const { levels, level } = this;
|
||
return levels[level][0];
|
||
},
|
||
|
||
currentSpeedText() {
|
||
const { speeds, speed } = this;
|
||
return speeds[speed][0];
|
||
},
|
||
|
||
currentOptionIndex() {
|
||
const { type, types} = this;
|
||
|
||
switch(type) {
|
||
case types.LEVEL: {
|
||
return this.level;
|
||
}
|
||
case types.SPEED: {
|
||
return this.speed;
|
||
}
|
||
case types.SCALING: {
|
||
return this.scaling;
|
||
}
|
||
case types.SUBTITLE: {
|
||
return this.subtitle;
|
||
}
|
||
}
|
||
|
||
// if (type === types.LEVEL)
|
||
// return this.level;
|
||
// else
|
||
// return this.speed;
|
||
},
|
||
|
||
lockImgSrc() {
|
||
return this.isLock ? LockImg: UnLockImg;
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.countHoleWidth();
|
||
this.barHide();
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* 计算进度条总长度
|
||
*/
|
||
countHoleWidth() {
|
||
const { fullStatus } = this;
|
||
|
||
const height = plus.display.resolutionHeight;
|
||
const width = plus.display.resolutionWidth;
|
||
|
||
|
||
if (fullStatus)
|
||
this.holeWidth = height > width ? height : width;
|
||
|
||
else
|
||
this.holeWidth = width < height ? width : height;
|
||
},
|
||
|
||
/**
|
||
* Toogle修改播放按钮状态，传入forceStatus以forceStatus为主
|
||
* @param {Object} forceStatus
|
||
*/
|
||
changePlayStatus(forceStatus) {
|
||
const { playStatus } = this;
|
||
let newStatus = !playStatus;
|
||
if (typeof forceStatus !== 'undefined')
|
||
newStatus = forceStatus;
|
||
|
||
this.playStatus = newStatus;
|
||
this.playBtnLink = newStatus ? imgLink.play : imgLink.pause;
|
||
},
|
||
|
||
pause() {
|
||
this.playStatus = true;
|
||
this.handlePlay();
|
||
},
|
||
|
||
play() {
|
||
this.playStatus = false;
|
||
this.handlePlay();
|
||
},
|
||
|
||
/**
|
||
* 播放按钮点击
|
||
*/
|
||
handlePlay() {
|
||
const { playStatus } = this;
|
||
this.changePlayStatus();
|
||
this.$emit('onPlayBtnClick', this.playStatus);
|
||
},
|
||
|
||
/**
|
||
* Toogle修改全屏按钮状态
|
||
*/
|
||
changeFullStatus() {
|
||
const { fullStatus } = this;
|
||
let newStatus = !fullStatus;
|
||
|
||
this.fullStatus = newStatus;
|
||
this.fullBtnLink = newStatus ? imgLink.normal : imgLink.full;
|
||
},
|
||
|
||
/**
|
||
* 全屏按钮点击
|
||
*/
|
||
handleFull() {
|
||
const { fullStatus } = this;
|
||
this.changeFullStatus();
|
||
this.$emit('onFullBtnClick', this.fullStatus);
|
||
this.countHoleWidth();
|
||
|
||
this.screenShotY = fullStatus ? '200rpx' : '300rpx';
|
||
|
||
},
|
||
|
||
/**
|
||
* 点击清晰度/倍速按钮
|
||
*/
|
||
handleBtn(type) {
|
||
const { selectStatus } = this;
|
||
this.type = type;
|
||
this.selectStatus = !this.selectStatus;
|
||
},
|
||
|
||
/**
|
||
* 选择切换清晰度/倍速
|
||
* @param {Object} value
|
||
*/
|
||
selectOption(value) {
|
||
const { types, type, speeds, subtitles } = this;
|
||
|
||
this[type] = value;
|
||
this.selectStatus = false;
|
||
|
||
switch(type) {
|
||
case types.LEVEL:
|
||
this.selectedHdAuto = value === 0;
|
||
this.$emit('onHdBtnClick', value);
|
||
break;
|
||
case types.SPEED:
|
||
this.$emit('onRateBtnClick', speeds[value][1]);
|
||
break;
|
||
case types.SCALING:
|
||
this.$emit('onScalingBtnClick', value);
|
||
break;
|
||
case types.SUBTITLE:
|
||
if(value === 0) {
|
||
this.isShowSubtitle = false;
|
||
this.$emit('onOpenSRT', false);
|
||
this.isShowDoubleSubTitle = false;
|
||
this.isShowSingleSubTitle = false;
|
||
break;
|
||
}
|
||
if (subtitles[value][0] === "双语") {
|
||
console.log("===1 切换双语")
|
||
// 发送开启双字幕
|
||
this.isShowSubtitle = true;
|
||
this.isShowDoubleSubTitle = true;
|
||
this.isShowSingleSubTitle = false;
|
||
this.$emit('onChangeSRTSingleMode', false);
|
||
this.$emit('onOpenSRT', true);
|
||
break;
|
||
}
|
||
this.isShowSubtitle = true;
|
||
this.isShowDoubleSubTitle = false;
|
||
this.isShowSingleSubTitle = true;
|
||
this.$emit('onChangeSRTSingleMode', true);
|
||
this.$emit('onOpenSRT', true);
|
||
this.$emit('onChangeSRTBtnClick', subtitles[value][0]);
|
||
break;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 点击空白区域
|
||
*/
|
||
handleMask() {
|
||
const { selectStatus, showBar } = this;
|
||
/**
|
||
* 若清晰度显示则隐藏
|
||
*/
|
||
if (selectStatus) {
|
||
this.selectStatus = false;
|
||
return;
|
||
}
|
||
|
||
if (showBar) {
|
||
this.showBar = false;
|
||
} else {
|
||
this.showBar = true;
|
||
this.barHide();
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 当前播放时间更新
|
||
* @param {Object} time
|
||
*/
|
||
timeUpdate(time) {
|
||
this.currentTime = time;
|
||
this.currentTimeText = this.timeFormat(time);
|
||
this.updateProgress();
|
||
},
|
||
|
||
/**
|
||
* 是否有字幕功能
|
||
* @param {boolean} enableSubTitle
|
||
* @param {boolean} enableSubTitleDouble
|
||
*/
|
||
setEnableSubtitle(enableSubTitle, enableSubTitleDouble) {
|
||
this.isEnableSubTitle = enableSubTitle
|
||
this.enableSubTitleDouble = enableSubTitleDouble
|
||
const { subtitles } = this;
|
||
if (enableSubTitleDouble) {
|
||
this.subtitles.push(["双语", subtitles.length]);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 设置字幕的样式
|
||
* @param {Object} config
|
||
*/
|
||
setSRTTextConfig(config) {
|
||
const position = config.position;
|
||
console.log("===1 setSRTTextConfig position: " + config.position);
|
||
console.log("===1 setSRTTextConfig color: " + config.backgroundColor);
|
||
const color = this.convertARGBtoRGBA(config.backgroundColor);
|
||
console.log("===1 change color: " + color);
|
||
if (position === "bottom") {
|
||
this.bottomSubtitle.fontColor = this.convertARGBtoRGBA(config.fontColor);
|
||
this.bottomSubtitle.fontSize = config.fontSize;
|
||
this.bottomSubtitle.bgColor = this.convertARGBtoRGBA(config.backgroundColor);
|
||
this.bottomSubtitle.isBold = config.fontBold;
|
||
this.bottomSubtitle.isItalic = config.fontItalics;
|
||
}
|
||
|
||
if (position === "top") {
|
||
this.topSubtitle.fontColor = this.convertARGBtoRGBA(config.fontColor);
|
||
this.topSubtitle.fontSize = config.fontSize;
|
||
this.topSubtitle.bgColor = this.convertARGBtoRGBA(config.backgroundColor);
|
||
this.topSubtitle.isBold = config.fontBold;
|
||
this.topSubtitle.isItalic = config.fontItalics;
|
||
}
|
||
|
||
if (position === null || position === "") {
|
||
this.singleSubtitle.fontColor = this.convertARGBtoRGBA(config.fontColor);
|
||
this.singleSubtitle.fontSize = config.fontSize;
|
||
this.singleSubtitle.bgColor = this.convertARGBtoRGBA(config.backgroundColor);
|
||
this.singleSubtitle.isBold = config.fontBold;
|
||
this.singleSubtitle.isItalic = config.fontItalics;
|
||
}
|
||
},
|
||
|
||
convertARGBtoRGBA(argbValue) {
|
||
if(!argbValue.startsWith('#') || argbValue.length !== 9) {
|
||
return argbValue;
|
||
}
|
||
const hexValue = argbValue.replace('#', '');
|
||
const alpha = parseInt(hexValue.slice(0, 2), 16) / 255;
|
||
const red = parseInt(hexValue.slice(2, 4), 16);
|
||
const green = parseInt(hexValue.slice(4, 6), 16);
|
||
const blue = parseInt(hexValue.slice(6, 8), 16);
|
||
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
|
||
},
|
||
|
||
/**
|
||
* 插入当前有多少可选的字幕
|
||
* @param {Object} titles
|
||
*/
|
||
setSRTTitle(titles) {
|
||
console.log("===1 title is " + titles);
|
||
const newItems = titles.map((lang)=>[lang, titles.indexOf(lang) + this.subtitles.length + 1]);
|
||
this.subtitles.push(...newItems);
|
||
},
|
||
|
||
/**
|
||
* 字幕
|
||
* @param {Object} srt
|
||
*/
|
||
setSRTText(srt) {
|
||
this.singleSubtitle.text = "";
|
||
this.topSubtitle.text = "";
|
||
this.bottomSubtitle.text = "";
|
||
|
||
console.info("====3 srtList: " + srt);
|
||
|
||
const data = JSON.parse(srt);
|
||
if (!data) {
|
||
return;
|
||
}
|
||
data.strList.forEach(item => {
|
||
const position = item.position;
|
||
if (position === "singleSubtitles") {
|
||
this.singleSubtitle.text = item.srtText;
|
||
}
|
||
if (position === "bottomSubtitles") {
|
||
this.bottomSubtitle.text = item.srtText;
|
||
}
|
||
if (position === "topSubtitles") {
|
||
this.topSubtitle.text = item.srtText;
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 视频总时长更新
|
||
* @param {Object} duration
|
||
*/
|
||
updateDuration(duration) {
|
||
this.duration = duration;
|
||
this.timeShowBlock = duration >= 3600 ? 2 : 1;
|
||
this.durationText = this.timeFormat(duration);
|
||
},
|
||
|
||
/**
|
||
* 更新进度条显示
|
||
*/
|
||
updateProgress(precent) {
|
||
const { currentTime, duration, finalPrecent, isDraging } = this;
|
||
let _precent;
|
||
|
||
const changeProgressWidth = (_precent) => {
|
||
this.progressPrecent = parseInt( _precent * 100 );
|
||
this.progressLeftOverPrecent = 100 - this.progressPrecent;
|
||
};
|
||
|
||
if (precent) {
|
||
// 强制使用外部传入进度百分比
|
||
_precent = this.limit(precent, 0, 1);
|
||
changeProgressWidth(_precent);
|
||
} else {
|
||
// 计算timeupdate当前进度条百分比
|
||
if (!duration || isDraging) return;
|
||
_precent = currentTime / duration;
|
||
this.precent = _precent;
|
||
changeProgressWidth(_precent);
|
||
}
|
||
|
||
},
|
||
/**
|
||
* 更新视频画面缩放模式
|
||
*/
|
||
updateScaling(mode) {
|
||
this.scaling = mode;
|
||
},
|
||
|
||
/**
|
||
* 监听进度条拖拽seek
|
||
*/
|
||
handleTouch(type, e) {
|
||
switch(type) {
|
||
case 'start':
|
||
this.initTouchPageX = e.touches[0].pageX * 2;
|
||
this.barShow();
|
||
break;
|
||
case 'move':
|
||
this.isDraging = true;
|
||
const touchPageX = e.touches[0].pageX * 2;
|
||
const changedX = this.getChangedX(touchPageX, this.initTouchPageX);
|
||
this.calcPrecentChange(changedX);
|
||
break;
|
||
case 'end':
|
||
if (this.isDraging) {
|
||
this.toSeek(this.finalPrecent);
|
||
this.isDraging = false;
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 计算变化百分比
|
||
* @param {Object} changedX
|
||
*/
|
||
calcPrecentChange(changedX) {
|
||
const { precent, holeWidth } = this;
|
||
let finalPrecent;
|
||
|
||
const changedPrecent = changedX / holeWidth;
|
||
finalPrecent = precent + changedPrecent;
|
||
finalPrecent = this.limit(finalPrecent, 0, 1);
|
||
this.updateProgress(finalPrecent);
|
||
this.finalPrecent = finalPrecent;
|
||
},
|
||
|
||
/**
|
||
* 获取变化的X坐标
|
||
* @param {Object} touchPageX touchend触发后的X坐标
|
||
* @param {Object} initTouchPageX touchstart触发后的X坐标
|
||
*/
|
||
getChangedX(touchPageX, initTouchPageX) {
|
||
return touchPageX - initTouchPageX;
|
||
},
|
||
|
||
touchstart(e) {
|
||
this.handleTouch('start', e);
|
||
},
|
||
|
||
touchmove(e) {
|
||
this.handleTouch('move', e);
|
||
},
|
||
|
||
touchend(e) {
|
||
this.handleTouch('end', e);
|
||
},
|
||
|
||
toSeek(precent) {
|
||
const seekTime = parseInt(precent * this.duration);
|
||
if (!isNaN(seekTime)) this.$emit('onToSeek', seekTime);
|
||
},
|
||
|
||
handleSeekTo(time) {
|
||
if (!isNaN(time)) {
|
||
this.$emit('onToSeek', time);
|
||
setTimeout(() => {
|
||
if (this.seekedNeedPlay) {
|
||
this.play();
|
||
this.seekedNeedPlay = false;
|
||
}
|
||
}, 100)
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 更新可选码率
|
||
* @param {Object} num
|
||
*/
|
||
updateLevels(num) {
|
||
if (!num) return;
|
||
const realNum = num + 1;
|
||
var allLevels = [
|
||
['自动', 0],
|
||
['流畅', 1],
|
||
['高清', 2],
|
||
['超清', 3]
|
||
];
|
||
this.levels = allLevels.slice(0, realNum);
|
||
if (this.type === this.types.LEVEL) {
|
||
this.selects = this.levels;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 更新当前码率
|
||
* @param {Object} level
|
||
*/
|
||
updateCurrentLevel(level) {
|
||
const { selectedHdAuto } = this;
|
||
if (selectedHdAuto) return;
|
||
// 若点击自动清晰度按钮后，不更新码率显示
|
||
this.level = level;
|
||
},
|
||
|
||
/**
|
||
* 显示控制栏
|
||
*/
|
||
barShow() {
|
||
if (this.clock) {
|
||
clearTimeout(this.clock);
|
||
this.clock = null;
|
||
}
|
||
this.showBar = true;
|
||
},
|
||
|
||
/**
|
||
* 隐藏控制栏
|
||
* @param {Boolean} immediately 是否立刻隐藏
|
||
*/
|
||
barHide(immediately) {
|
||
return;
|
||
const { showBarTime } = this;
|
||
if (this.clock) {
|
||
clearTimeout(this.clock);
|
||
this.clock = null;
|
||
}
|
||
|
||
this.clock = setTimeout(() => {
|
||
this.showBar = false;
|
||
}, showBarTime * 1000);
|
||
},
|
||
|
||
/**
|
||
* 处理手势控制
|
||
* @param {Object} type 手势类型
|
||
* @param {Object} value 手势变化值
|
||
*/
|
||
handleGEvent(data) {
|
||
switch(data.type) {
|
||
case 'SEEK_TIME_UPDATE': {
|
||
|
||
if (this.playStatus) {
|
||
this.seekedNeedPlay = true;
|
||
this.pause();
|
||
}
|
||
const { finalTime } = data;
|
||
if (isNaN(finalTime)) {
|
||
return;
|
||
}
|
||
this.gestureChangeSeekTime = finalTime;
|
||
this.showGestureSeekTips = true;
|
||
clearTimeout(this.$options.gestureTimeout);
|
||
|
||
// 600ms后隐藏tips
|
||
this.$options.gestureTimeout = setTimeout(() => {
|
||
this.showGestureSeekTips = false;
|
||
this.gestureChangeSeekTime = 0;
|
||
}, 600)
|
||
|
||
}
|
||
break;
|
||
case 'LEFT_UP':
|
||
// console.log('LEFT_UP');
|
||
uni.getScreenBrightness({
|
||
success: (res) => {
|
||
this.setBrightness(res.value, data.position, 1);
|
||
}
|
||
});
|
||
break;
|
||
case 'LEFT_DOWN':
|
||
// console.log('LEFT_DOWN');
|
||
uni.getScreenBrightness({
|
||
success: (res) => {
|
||
this.setBrightness(res.value, data.position, -1);
|
||
}
|
||
});
|
||
break;
|
||
case 'RIGHT_UP':
|
||
// console.log('RIGHT_UP');
|
||
this.volumeChanged(data.position, 1);
|
||
break;
|
||
case 'RIGHT_DOWN':
|
||
// console.log('RIGHT_DOWN');
|
||
this.volumeChanged(data.position, -1);
|
||
break;
|
||
case 'DOUBLE_CLICK':
|
||
console.log('DOUBLE_CLICK');
|
||
if (this.playStatus) {
|
||
this.pause();
|
||
} else {
|
||
this.play();
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 设置亮度
|
||
* @param {Object} currentValue 当前亮度
|
||
* @param {Object} changedValue 改变值
|
||
* @param {Object} isDown 若为减弱，则设置为-1，否则为1
|
||
*/
|
||
setBrightness(currentValue, changedValue, isDown) {
|
||
// 除6降低灵敏度
|
||
changedValue = Math.abs(changedValue / 6) / 100 * isDown;
|
||
let realValue = currentValue + changedValue;
|
||
realValue = this.limit(realValue, 0, 1);
|
||
this.lightPrecent = parseInt(realValue * 100);
|
||
|
||
uni.setScreenBrightness({
|
||
value: realValue
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 音量变化
|
||
* @param {Object} changedValue
|
||
* @param {Object} isDown
|
||
*/
|
||
volumeChanged(changedValue, isDown) {
|
||
changedValue = Math.abs(changedValue / 10) / 100 * isDown;
|
||
this.$emit('onVolumeChanged', changedValue);
|
||
},
|
||
|
||
/**
|
||
* 更新音量变化显示
|
||
* @param {Object} value
|
||
*/
|
||
updateVolumeValue(value) {
|
||
this.volumeValue = value;
|
||
},
|
||
|
||
/**
|
||
* 时间（秒）格式化
|
||
* @param {Object} result
|
||
*/
|
||
timeFormat(result) {
|
||
const { timeShowBlock } = this;
|
||
|
||
let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
|
||
let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
|
||
let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
|
||
|
||
if (timeShowBlock === 2)
|
||
return result = h + ':' + m + ':' + s;
|
||
else
|
||
return result = m + ':' + s;
|
||
},
|
||
|
||
/**
|
||
* 控制最小值，最大值
|
||
* @param num
|
||
* @param min
|
||
* @param max
|
||
* @returns {*}
|
||
*/
|
||
limit(num, min, max) {
|
||
if (num < min) return min;
|
||
if (num > max) return max;
|
||
return num;
|
||
},
|
||
|
||
handleTouchCancel() {
|
||
if (this.isLock) return;
|
||
if (this.isInLongPress) {
|
||
this.isInLongPress = false;
|
||
this.$emit('onRateBtnClick', 1);
|
||
}
|
||
|
||
},
|
||
// 特殊情况如果不触发touchcancel, 触发touchend时取消长按状态
|
||
handleTouchEnd() {
|
||
this.handleTouchCancel()
|
||
},
|
||
|
||
|
||
handleLongPress() {
|
||
if (this.isLock) return;
|
||
this.isInLongPress = true;
|
||
|
||
this.play();
|
||
this.$emit('onRateBtnClick', 2);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.plv-player-mask {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 120rpx;
|
||
}
|
||
|
||
.plv-player-bar__bg {
|
||
width: 1624rpx;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.plv-player-bar {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 120rpx;
|
||
bottom: 0;
|
||
}
|
||
|
||
.plv-player-bar__box {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 120rpx;
|
||
bottom: 0;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.plv-player-mr-left {
|
||
flex: 10;
|
||
}
|
||
|
||
.plv-player-mr-right {
|
||
flex: 10;
|
||
}
|
||
|
||
.plv-player-middle {
|
||
flex: 80;
|
||
}
|
||
|
||
.plv-player-progress {
|
||
flex: 40;
|
||
}
|
||
|
||
.plv-player-subtitle-view {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 150rpx;
|
||
bottom: 50rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.plv-subtitle-top-text {
|
||
background-color: greenyellow;
|
||
}
|
||
|
||
.plv-subtitle-bottom-text {
|
||
background-color: darkred;
|
||
}
|
||
|
||
.plv-player-progress__play__wrap {
|
||
flex-direction: row;
|
||
flex: 1;
|
||
}
|
||
|
||
.plv-player-progress__wrap__played {
|
||
top: 20rpx;
|
||
height: 8rpx;
|
||
background-color: #0A98D5;
|
||
}
|
||
|
||
.plv-player-progress__wrap__surplus {
|
||
top: 20rpx;
|
||
height: 8rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.plv-player-progress__dot__wrap {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.plv-player-progress__dot__box {
|
||
flex: 1;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.plv-player-progress__dot__played {
|
||
flex: 20;
|
||
}
|
||
|
||
.plv-player-progress__dot__surplus {
|
||
flex: 80;
|
||
}
|
||
|
||
.plv-player-progress__mask {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
border-radius: 4rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
.plv-player-progress__dot {
|
||
position: absolute;
|
||
width: 10rpx;
|
||
height: 30rpx;
|
||
top: 8rpx;
|
||
right: 0;
|
||
border-radius: 4rpx;
|
||
background-color: #FFFFFF;
|
||
/* transform: translateX(15rpx); */
|
||
}
|
||
|
||
.plv-player-bar-bottom {
|
||
flex-direction: row;
|
||
flex: 60;
|
||
}
|
||
|
||
.plv-btn {
|
||
position: relative;
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
top: 8rpx;
|
||
bottom: 0;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.plv-player-full-btn {
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
|
||
.plv-player-hd-btn {
|
||
position: absolute;
|
||
right: 64rpx;
|
||
}
|
||
|
||
.plv-player-rate-btn {
|
||
position: absolute;
|
||
right: 128rpx;
|
||
}
|
||
|
||
.plv-player-scaling-btn {
|
||
position: absolute;
|
||
right: 210rpx;
|
||
}
|
||
|
||
.plv-player-subtitle-btn {
|
||
position: absolute;
|
||
right: 278rpx;
|
||
}
|
||
|
||
.plv-player-time {
|
||
position: relative;
|
||
top: 8rpx;
|
||
flex-direction: row
|
||
}
|
||
|
||
.plv-player-select {
|
||
position: absolute;
|
||
width: 200rpx;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.plv-player-select__bg {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #0A98D5;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.plv-player-select__option {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 20rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.plv-player-select__option__item {
|
||
padding: 18rpx;
|
||
}
|
||
|
||
|
||
.plv-player-btn__text {
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
line-height: 64rpx;
|
||
}
|
||
|
||
.select-option__text {
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
line-height: 20rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.active {
|
||
color: #0A98D5;
|
||
}
|
||
|
||
.plv-player-light {
|
||
flex: 1;
|
||
align-items: center;
|
||
}
|
||
|
||
.plv-player-volume {
|
||
position: absolute;
|
||
top: 50rpx;
|
||
left: 0;
|
||
right: 0;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.plv-player-screenshot {
|
||
position: absolute;
|
||
margin-left: 80rpx;
|
||
}
|
||
|
||
.plv-player-screenshot__btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.plv-player-lock {
|
||
position: absolute;
|
||
right: 80rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: rgba(0,0,0, .5);
|
||
border-radius: 40rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.plv-player-lock__btn {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.plv-player-skin-drag-tips {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
/* justify-content: center;
|
||
align-items: center; */
|
||
}
|
||
|
||
.plv-player-longpress-speed {
|
||
position: absolute;
|
||
width: 175rpx;
|
||
padding: 10rpx;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
top: 40rpx;
|
||
border-radius: 15px;
|
||
background: rgba(0,0,0,.8);
|
||
}
|
||
|
||
|
||
.plv-player-longpress-speed__image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.plv-player-longpress-speed__text {
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.plv-player-comp-box {
|
||
position: absolute;
|
||
height: 300rpx;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 0;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
</style>
|