hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-08 18:36:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

pc视频播放器禁止拖动

Browse Source
This commit is contained in:
joshen
2024-10-10 23:07:46 +08:00
parent 3b017445c6
commit 6b6e8a4096
3 changed files with 101 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/VideoPlayer/index.vue
View File

@@ -40,12 +40,12 @@
:isPlaying="isPlaying"
:biBarrageXml="biBarrageXml"
/>
<!-- 加载动画 -->
<div v-show="isShowLoading && isCrowd && isShowPlayer" class="player-loading" @click="videoDom.focus({preventScroll: true})">
<!-- 加载动画(应该当前视频没有缓存时显示加载动画) && isCrowd && isShowPlayer -->
<div v-show="isShowLoading" class="player-loading" @click="videoDom.focus({preventScroll: true})">
<img src="@/components/VideoPlayer/images/loading.svg" alt="loading"/>
</div>
<!-- 控制栏 -->
<div v-show="!isShowLoading && isCrowd" class="player-controls-container" @click="videoDom.focus({preventScroll: true})">
<div v-show="isCrowd" class="player-controls-container" @click="videoDom.focus({preventScroll: true})">
<div v-show="isShowVolumeHint" class="player-volumeHint">
<span class="player-volumeHint-text">当前音量:{{volumePercent}}%</span>
</div>
@@ -71,6 +71,7 @@
<div :class="{'player-controls': true, 'cursor-lasting-static': isCursorStatic}">
<div class="player-progress-bar">
<progressBar
:blobId="blobId"
:currentProgress="currentProgress"
v-on:updateProgress="updateProgressByClickBar"
v-on:getMouseDownStatus="getMouseDownStatusOfProgressBar"
@@ -241,6 +242,11 @@ export default {
type: String,
default: null,
},
// 视频链接对应的content Id
blobId: {
type: String,
default: null,
},
// 主题色
primaryColor: {
type: String,
@@ -312,6 +318,17 @@ export default {
}
setInterval(() => {
console.log('this.currentProgress::',this.currentProgress,this.isDrag)
// 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行
if(!this.isDrag){
var time = localStorage.getItem('videoProgressData')
var arr = time&&JSON.parse(time) || {}
if(arr[this.blobId] < this.currentProgress || !arr[this.blobId]){
arr[this.blobId] = parseFloat((this.currentProgress).toFixed(8))
if(arr[this.blobId]) localStorage.setItem('videoProgressData',JSON.stringify(arr))
}
}
// 定时更新进度条
if (this.isPlaying && !this.isMousedownProgress) {
this.currentProgress =
@@ -365,11 +382,13 @@ export default {
//当视频由于需要缓冲下一帧而停止，解决一直计时的问题
onWaiting(){
console.log('触发了onWairing');
this.isShowLoading = true
this.$emit('onPlayerPause', {})
},
//当音频/视频在已因缓冲而暂停或停止后已就绪时
onPlaying(){
console.log('触发缓存结束onPlaying');
this.isShowLoading = false
if(this.videoDom.paused){
this.$emit('onPlayerPause', {})
}else{

44
src/components/VideoPlayer/progress-bar.vue
View File

@@ -38,6 +38,9 @@ export default {
isDrag:{
type: Boolean,
default: true,
},
blobId:{
type: String,
}
},
data() {
@@ -57,10 +60,12 @@ export default {
window.addEventListener("mousemove", (e) => {
if (this.is_mousedown_progress) {
this.move(e);
e.preventDefault();
}
});
window.addEventListener("mouseup", (e) => {
this.up(e);
e.preventDefault();
});
},
beforeDestroy() {
@@ -68,7 +73,7 @@ export default {
},
methods: {
down(e) {
if(this.isDrag) {
// if(this.isDrag) {
this.$emit("getMouseDownStatus", true);
this.is_mousedown_progress = true;
// 获取完整进度条的clientX（dom左上角）
@@ -76,28 +81,47 @@ export default {
// 计算调整后的当前进度条的长度
this.current_width_px = e.clientX - init_clientX;
// 设置当前的播放进度（同时作用于当前进度条的样式）
let current =
(e.clientX - init_clientX) / this.dom_full.clientWidth;
let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
if(current>1) current = 1;
if(current<0) current = 0;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('down arr:',this.isDrag,this.blobId,arr,arr[this.blobId],current)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress", current);
}
// }
},
move(e) {
if (this.is_mousedown_progress && this.isDrag) {
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;
let current = (e.clientX - init_clientX) / this.dom_full.clientWidth;
if(current>1) current = 1;
if(current<0) current = 0;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('move arr:',this.isDrag,this.blobId,arr,arr[this.blobId],current)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress", current);
}
},
up() {
if (this.is_mousedown_progress && this.isDrag) {
if (this.is_mousedown_progress) {
// 标记鼠标不处于按下的状态了
this.is_mousedown_progress = false;
// 松开鼠标后，即调整进度条后，此时的进度（0-1）
let current =
this.current_width_px / this.dom_full.clientWidth;
let current = this.current_width_px / this.dom_full.clientWidth;
if(current>1) current = 1;
if(current<0) current = 0;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('up arr:',this.isDrag,this.blobId,arr,arr[this.blobId],current)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress", current);
this.$emit("getMouseDownStatus", false);
}

46
src/views/study/coursenew.vue
View File

@@ -27,7 +27,7 @@
<course-image v-if="courseInfo.id != ''" :course="courseInfo"></course-image>
</div>
<div v-if="resType == 10" style="position: relative;">
<videoPlayer ref="myVideoPlayer" id="myVideoPlayer" @progress="progress" :src="blobUrl" @onPlayerPlaying="onPlayerPlaying"
<videoPlayer ref="myVideoPlayer" id="myVideoPlayer" @progress="progress" :src="blobUrl" :blobId="blobId" @onPlayerPlaying="onPlayerPlaying"
:initTime="contentData.lastStudyTime" :notePlay="notePlay" @onPlayerPlay="onPlayerPlay"
:isDrag="curriculumData.isDrag" @onFullscreen="onFullscreen" @onPlayerPause="onPlayerPause"
@onPlayerEnded="onPlayerEnded" :isCrowd="isCrowd" @onTimeUpdate="handleAudioTimeUpdate"></videoPlayer>
@@ -652,6 +652,8 @@
} else {
this.blobUrl = process.env.VUE_APP_BASE_API + '/xboe/m/course/cware/resource?sign=' + urlSign;
}
console.log('this.contentData.id:',this.contentData.id)
this.blobId = this.contentData.id
//console.log(this.blobUrl,'this.blobUrl');
},
widthOpen(url) {
@@ -814,6 +816,28 @@
$this.controlHeight=h-95;
//console.log(h,$this.controlHeight,'$this.controlHeight');
})
console.log('this.contentData11:',this.contentData,this.curriculumData)
// 视频设置禁用处理逻辑,如果用户已全部观看完该视频，则设置为能全部拖动的逻辑，把isDrag设置为true即可,同时删除本地存储的数据
if(this.contentData.progressVideo ===1){
var obj = JSON.parse(this.contentData.content)
obj.isDrag = true
this.contentData.content = JSON.stringify(obj)
this.curriculumData.isDrag = true
var time = localStorage.getItem('videoProgressData')
var arr = time&&JSON.parse(time) || {}
//alert(con.progressVideo+'--'+con.id + '--'+JSON.stringify(arr))
delete arr[this.contentData.id];
localStorage.setItem('videoProgressData',JSON.stringify(arr))
}
if(this.contentData.progressVideo>0 && this.contentData.progressVideo !==1){
var time = localStorage.getItem('videoProgressData')
var arr = time&&JSON.parse(time) || {}
arr[this.contentData.id] = this.contentData.progressVideo
localStorage.setItem('videoProgressData',JSON.stringify(arr))
}
},
isShowTime(){
if(this.isContentTypeTwo != this.contentData.contentType){
@@ -1205,6 +1229,16 @@
itemId: this.contentData.studyItemId,
videoTime: intTime
};
console.log('this.courseInfo:',this.contentData)
if(!this.curriculumData.isDrag && this.contentData.progressVideo !=1){
var time = localStorage.getItem('videoProgressData')
var arr = time&&JSON.parse(time) || {}
if(arr[this.blobId] && this.contentData.progressVideo<arr[this.blobId]) {
postData.progressVideo = arr[this.blobId]
postData.contentId = this.contentData.id
postData.courseId = this.contentData.courseId
}
}
//console.log('记录播放时间')
apiStudy.studyVideoTime(postData).then(rs => {
if (rs.status != 200) {
@@ -1247,6 +1281,16 @@
itemId: this.contentData.studyItemId,
videoTime: intTime
};
console.log('this.courseInfo:',this.contentData)
if(!this.curriculumData.isDrag && this.contentData.progressVideo !=1){
var time = localStorage.getItem('videoProgressData')
var arr = time&&JSON.parse(time) || {}
if(arr[this.blobId] && this.contentData.progressVideo<arr[this.blobId]) {
postData.progressVideo = arr[this.blobId]
postData.contentId = this.contentData.id
postData.courseId = this.contentData.courseId
}
}
//console.log('记录播放时间')
apiStudy.studyVideoTime(postData).then(rs => {
if (rs.status != 200) {