hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-14 13:26:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

video progress edit

Browse Source
This commit is contained in:
joshen
2024-08-01 14:39:21 +08:00
parent e14ca569f6
commit 9bc179c583
3 changed files with 131 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
components/video-player/video-player.vue
View File

@@ -1,8 +1,9 @@
<template>
<view>
<view v-if="!xvideoBool" id="xvideoPlayer-box" :class="fullScreenFlag?'video-box video-full-screen':'video-box'">
<view v-if="!xvideoBool || xvideoBool&&drag" id="xvideoPlayer-box" :class="fullScreenFlag?'video-box video-full-screen':'video-box'">
<div style="color:#ffffff">{{currtimeText}}</div>
<!--webkit-playsinline playsinline x5-video-player-type="h5-page-->
<!-- <video id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageWidth/videoPageHeight*256)+'px':'','top':fullScreenFlag?videoPageHeight/2+'px':''}" -->
<!-- :src="url" <video id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageWidth/videoPageHeight*256)+'px':'','top':fullScreenFlag?videoPageHeight/2+'px':''}" -->
<video id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2+'px':''}"
:src="url"
:controls="false"
@@ -19,7 +20,8 @@
@loadeddata="onLoad"
@loadedmetadata="onMetaLoad"
@controlstoggle="onControlsToggle"
></video>
>
</video>
<view id="xplayer-control">
<!-- <view class="process-container" v-if="contrlShow" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%','margin-left':fullScreenFlag?'-320px':'','top':fullScreenFlag?'300px':videoFullHeight + 'px'}"> -->
<view class="process-container" v-if="contrlShow" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight*0.98+'px':'96%','margin-top':-1*videoPageHeight*0.02+'px','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2-174 - (videoPageWidth-375)/2+'px':'','bottom':fullScreenFlag?'auto':'0px'}">
@@ -72,7 +74,7 @@
</view>
</view>
</view>
<view v-if="xvideoBool" class="video-box-error">
<view v-if="xvideoBool && !drag" class="video-box-error">
<view style="color: #ffffff;padding: 0px 50px 0px;font-size: 16px;">{{mobileVideoDragText}}</view>
<button style="display: inline-block;font-size: 14px;padding: 0px 10px;line-height: 28px;" v-if="mobileVideoDragSwitch == 'true'" @click="xvideoBoolFun">仍要使用此浏览器观看</button>
</view>
@@ -151,6 +153,10 @@
// horizontalScreenFlag: true // 默认竖屏
mobileVideoDragSwitch: '', // 视频播放器扔要使用此浏览器观看
mobileVideoDragText: '', // 视频播放器妆容提示文本内容
currtimeText: 0,
currentTimeFormat: "00:00", // 当前播放进度的文字
fullTimeFormat: "00:00", // 视频总长度的文字
iosCurrentTime: 0, // ios里视频播放毫秒
};
},
computed: {
@@ -158,17 +164,34 @@
},
watch:{
url(newVal,oldVal){
//console.log( 'watch url:',newVal,oldVal,this.videoContext)
//document.getElementById('xvideoPlayer').style.display = 'none'
this.videoContext.stop();
this.playing=false;
this.curVideo.currentTime = 0;
this.iosCurrentTime = 0;
this.sliderValue = 0;
this.videoSpeed = 1.0;
this.currtime = "00:00";
document.getElementsByTagName('video')[0].load()
setTimeout(()=>{
document.getElementsByTagName('video')[0].play()
},100)
//this.videoContext.load();
//document.getElementById('xvideoPlayer').style.display = 'block'
//this.videoContext=uni.createVideoContext("xvideoPlayer", this);
},
inittime(newVal,oldVal){
this.initPlayingTime=newVal;
//console.log('inittime::',newVal,oldVal)
}
},
mounted() {
var _this = this
this.initPlayingTime=this.inittime;
this.videoContext=uni.createVideoContext("xvideoPlayer", this);
document.getElementsByTagName('video')[0].load()
uni.getSystemInfo({
success: function (info) {
//alert(info.windowWidth)
@@ -177,7 +200,27 @@
// 你可以在这里根据窗口高度进行后续操作
}
});
this.dictCode();
if(this.xvideoBool) this.dictCode();
// 每一秒更新进度条
setInterval(() => {
// 定时更新进度条
// if (this.isPlaying && !this.isMousedownProgress) {
// this.currentProgress = this.videoContext.currentTime / this.videoContext.duration;
// }
if (this.playing && !this.isMousedownProgress) {
this.iosCurrentTime = this.iosCurrentTime + 1
// this.sliderValue = this.iosCurrentTime/this.curVideo.duration * 100
}
// 定时更新进度的文字显示
this.updateProgressText();
}, 1000);
//绑定全局监听器
window.addEventListener("touchstart", (e) => {
if(this.speedListShow && !e.target.closest('.speed-control')){
this.speedListShow = false
}
},{ passive: false });
},
methods: {
xvideoBoolFun(){
@@ -187,11 +230,9 @@
dictCode(){
var _this = this
apiManage.getDictCode('mobile_video_switch').then(res=>{
console.log('字典res::',res.code,res.data[0].name)
if(res.code==200){
if(res.code==200 && res.data[0]){
_this.mobileVideoDragText = res.data[0].name
_this.mobileVideoDragSwitch = res.data[0].value
console.log('11111:',_this.mobileVideoDragText,_this.mobileVideoDragSwitch)
}
})
},
@@ -207,6 +248,8 @@
this.druationTime = this.formatSeconds(duration);
this.currtime = this.formatSeconds(second);
this.iosCurrentTime = second;
//alert('1---this.currtime='+this.currtime)
// var duration=this.curVideo.duration;
// var second= value * duration;
if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
@@ -214,7 +257,7 @@
if(type === 'start'){
this.updateState= false;
}
if( type === 'end'){
if( type === 'end'){
this.videoContext.seek(second);
this.curVideo.currentTime = second;
this.updateState= true //完成拖动后允许更新滚动条
@@ -237,7 +280,6 @@
this.videoFullHeight=190
if(document && document.exitFullscreen){
document.body.scrollTop = 0; // 对Safari
document.documentElement.scrollTop = 0; // 对Chrome, Firefox, IE 和 Opera
document.exitFullscreen();
@@ -316,9 +358,9 @@
},
// 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
videoUpdate(e) {
this.historyTime = e.detail.currentTime
let duration=this.curVideo.duration;
let sliderValue = e.detail.currentTime / duration * 100;
let second=sliderValue / 100 * duration;
@@ -335,11 +377,13 @@
}else{
}
// alert(this.sliderValue)
this.druationTime = this.formatSeconds(duration);
//console.log(this.druationTime,'this.druationTime');
this.currtime = this.formatSeconds(second);
this.iosCurrentTime = second;
// alert('2---this.currtime='+this.currtime)
// var time = localStorage.getItem('videoProgressData')
// //alert(1)
// if(time && !this.drag || !this.drag && !time ){
@@ -376,6 +420,7 @@
this.updateState= true //完成拖动后允许更新滚动条
this.druationTime = this.formatSeconds(duration);
this.currtime = this.formatSeconds(second);
//alert('3---this.currtime='+this.currtime)
}
},
onFullScreen(e) {
@@ -481,9 +526,37 @@
this.$emit('play')
},
onTimeUpdate(e){
this.currtimeText = this.currtimeText + 1
this.videoUpdate(e);
this.$emit('timeupdate',e)
},
/* 更新视频进度的文字显示
*/
updateProgressText() {
// console.log('updateProgressText this.videoContext::',this.videoContext,this.iosCurrentTime)
this.currentTimeFormat = this.secondTimeFormat(this.iosCurrentTime);
this.fullTimeFormat = this.secondTimeFormat(this.curVideo.duration);
},
/* 时间格式化，秒格式化成xx:xx:xx
*/
secondTimeFormat(second) {
if(second<0) second = 0;
let result = parseInt(second);
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);
result = `${m}:${s}`; // ${h}:
return result;
},
onPause() {
this.playing=false;
this.$emit('pause')