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

视频播放组件

Browse Source
This commit is contained in:
daihh
2022-11-18 16:21:16 +08:00
parent 9ea597a715
commit 0cac363df4
3 changed files with 131 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
pages/study/courseStudy.vue
View File

@@ -9,36 +9,19 @@
<view v-if="curContent.contentType==10" style="background-color: #000000;">
<!--视频-->
<view style="position: relative;">
<video id="myVideo"
@touchend="doubleClickVideo"
:src="blobUrl"
controls
:enable-play-gesture="true"
:initial-time="curContent.lastStudyTime"
@play="onPlayerPlay"
@pause="onPlayerPause"
@ended="onPlayerEnded"
@timeupdate="onPlayerPlaying"
@fullscreenchange="onFullScreen"
style="width: 100%; object-fit: fill">
</video>
<!--倍速度-->
<view id="myVideoSpeed" class="player-controls-btn cursor-pointer btn-speed">
<view @click="showSpeedCtrl">{{videoSpeed === 1 ? '倍速' : `${videoSpeed}x`}}</view>
<view class="speed-control" v-if="speedListShow">
<view class="speed-control-list">
<view class="li"
v-for="item in speedList"
:key="item"
@click="changeSpeed(item)"
:data-value="item"
:class="{'current': videoSpeed === Number(item)}">
{{ item }}x
</view>
</view>
</view>
</view>
<view class="player-box" v-if="playerBoxShow">
<video-player
url="/static/temp/test.mp4"
controls
:enable-play-gesture="true"
:inittime="curContent.lastStudyTime"
@play="onPlayerPlay"
@pause="onPlayerPause"
@ended="onPlayerEnded"
@timeupdate="onPlayerPlaying"
@fullscreenchange="onFullScreen"
style="width: 100%; object-fit: fill">
></video-player>
<view class="player-box" v-if="playerBoxShow">
<view class="player-praise">
<view @click="praiseContent" style="cursor: pointer;">
<image class="icon-small" v-if="isPraise" src="/static/images/icon/praise-active.png" />
@@ -1335,41 +1318,7 @@
},
onFullScreen(e){
//console.log(e,'e');
let full=e.detail.fullScreen;
let divId='videowatermark';
setTimeout(() => {
var div = document.getElementById('myVideo')
var div1 = div.firstChild;
var speedDiv=div1.querySelector("#myVideoSpeed");
if(full){
var div3 = document.createElement("div");
div3.id =divId;
div3.setAttribute("class", "fullmark");
div3.innerHTML='';
// 从父组件传过来的水印内容
//div3.innerText =this.userInfo.name+this.userInfo.code;
for(var i=0;i<4;i++){
div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+this.userInfo.name+this.userInfo.code+'</div>';
}
div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
//console.log(div3,'div3');
div1.appendChild(div3);
if(!speedDiv){
var speedDiv=document.getElementById('myVideoSpeed');
div1.appendChild(speedDiv)
}
}else{
var markDiv=div1.querySelector("#"+divId);
//var speedDiv=div1.querySelector("#myVideoSpeed");
if(markDiv){
div1.removeChild(markDiv);
}
if(speedDiv){
//div1.removeChild(speedDiv);
}
}
}, 200);
},
onPlayerPlay(){
this.isPlaying = true;