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

播放器禁止拖动设置修改

Browse Source
This commit is contained in:
joshen
2024-06-24 08:40:05 +08:00
parent a7c041b010
commit fe310b2a71
3 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/video-player/progress-bar.vue
View File

@@ -8,9 +8,9 @@
<div
class="progress-bar"
:style="{width: width}"
@mousedown.left="down"
@mousemove="move"
@mouseup="up"
@touchstart.left="start"
@touchmove="move"
@touchend="up"
>
<div class="progress-full" :style="{height: height}">
<div class="progress-current" :style="{width: currentProgress + '%'}"></div>
@@ -56,13 +56,22 @@ export default {
//初始化一些固定数据
let dom_full = this.$el.getElementsByClassName("progress-full")[0];
this.dom_full = dom_full;
// window.addEventListener("touchstart", (e) => {
// console.log("touchstart::",this.is_mousedown_progress)
// //if (this.is_mousedown_progress) {
// this.down(e);
// //}
// });
//绑定全局监听器
window.addEventListener("touchmove", (e) => {
console.log("touchmove::",this.is_mousedown_progress)
if (this.is_mousedown_progress) {
this.move(e);
this.move(e);
e.preventDefault();
}
});
},{ passive: false });
window.addEventListener("touchend", (e) => {
console.log("touchend::",this.is_mousedown_progress)
this.up(e);
});
},
@@ -70,35 +79,34 @@ export default {
//
},
methods: {
down(e) {
start(e) {
this.$emit("getMouseDownStatus", true);
this.is_mousedown_progress = true;
// 获取完整进度条的clientX（dom左上角）
let init_clientX = this.dom_full.getBoundingClientRect().left;
// 计算调整后的当前进度条的长度
this.current_width_px = e.clientX - init_clientX;
this.current_width_px = e.touches[0].clientX - init_clientX;
// 设置当前的播放进度（同时作用于当前进度条的样式）
let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('down::',this.isDrag,time,arr[this.blobId] ,current)
console.log('start::',e,this.isDrag,time,arr[this.blobId] ,current,e.touches[0].clientX,init_clientX,this.dom_full.clientWidth)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress", current);
this.$emit("updateProgress",'start', current);
},
move(e) {
if (this.is_mousedown_progress) {
let init_clientX = this.dom_full.getBoundingClientRect().left;
this.current_width_px = e.clientX - init_clientX;
let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
this.current_width_px = e.touches[0].clientX - init_clientX;
let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('move::',this.isDrag,time,arr[this.blobId] ,current)
console.log('move::',e,this.isDrag,time,arr[this.blobId] ,current)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress", current);
this.$emit("updateProgress",'move', current);
}
},
up() {
@@ -113,7 +121,7 @@ export default {
console.log('up::',this.isDrag,time,arr[this.blobId] ,current)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress", current);
this.$emit("updateProgress",'end', current);
}
},

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

@@ -22,11 +22,12 @@
<image :src="require(playing? './images/pause.png':'./images/play.png')" @click.stop='videoOpreation'/>
</view>
<view class="currtime">{{currtime}}</view>
<!-- <cover-view v-if="drag" class='slider-container'>
<cover-view v-if="drag" class='slider-container'>
<slider @change.stop="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
<slider v-if="!drag" disabled="true" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
</cover-view> v-if="!drag" -->
<view class='slider-container new-bar'>
<!-- <slider v-if="!drag" disabled="true" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/> -->
</cover-view>
<view v-if="!drag" class='slider-container new-bar'>
<progressBar
:currentProgress="sliderValue"
:blobId="blobId"
@@ -139,28 +140,30 @@
methods: {
/* 点击进度条更新视频播放进度
*/
updateProgressByClickBar(value) {
console.log('value------:',value)
let duration = this.curVideo.duration;
let new_current_time = Math.round(value * duration);
// this.barrageTimelineStart = new_current_time;
this.curVideo.currentTime = new_current_time;
this.sliderValue = value * 100;
this.videoContext.seek(new_current_time);
updateProgressByClickBar(type,value) {
let duration = this.curVideo.duration;
let second = Math.round(value * duration);
this.curVideo.currentTime = second;
this.sliderValue= value * 100,
this.druationTime = this.formatSeconds(duration);
this.currtime = this.formatSeconds(second);
// var duration=this.curVideo.duration;
// var second=e.detail.value / 100 * duration;
// if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
// this.videoContext.seek(second);
// this.sliderValue= e.detail.value,
// this.updateState= true //完成拖动后允许更新滚动条
// this.druationTime = this.formatSeconds(duration);
// this.currtime = this.formatSeconds(second);
// }
// var second= value * duration;
if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
if(type === 'start'){
this.updateState= false;
}
if( type === 'end'){
this.videoContext.seek(second);
this.curVideo.currentTime = second;
this.updateState= true //完成拖动后允许更新滚动条
//alert('value000------:'+value+'---'+this.curVideo.duration)
}
}
},
/* 获取鼠标是否按下了进度条
*/
@@ -220,7 +223,6 @@
let duration=this.curVideo.duration;
let sliderValue = e.detail.currentTime / duration * 100;
let second=sliderValue / 100 * duration;
// console.log('onTimeUpdate11111::',this.drag,second)
// if(!this.drag){
// this.videoContext.seek(second);
@@ -268,6 +270,7 @@
sliderChange(e) {
var duration=this.curVideo.duration;
var second=e.detail.value / 100 * duration;
// alert(e.detail.value + '--slider--'+duration + '--' +second)
if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
this.videoContext.seek(second);
this.sliderValue= e.detail.value,