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

Merge remote-tracking branch 'yx/20250821-hz' into master-0626-prod

Browse Source
This commit is contained in:
joshen
2025-08-28 17:21:06 +08:00
parent a23c213d12 da1ecce313
commit 0e7e168250
7 changed files with 734 additions and 701 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,13 @@
<template> <template>
<view> <view>
<view v-if="!xvideoBool || xvideoBool&&drag" 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> --> <!-- <div style="color:#ffffff">{{currtimeText}}</div> -->
<!--webkit-playsinline playsinline x5-video-player-type="h5-page--> <!--webkit-playsinline playsinline x5-video-player-type="h5-page-->
<!-- :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':''}" --> <!-- :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':''}" <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':''}"
ref="videoPlayer"
:src="url" :src="url"
:controls="false" :controls="false"
:enable-play-gesture="false" :enable-play-gesture="false"
@@ -24,11 +27,12 @@
</video> </video>
<view id="xplayer-control"> <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+'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'}"> <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'}">
<view class="controller-play"> <view class="controller-play">
<image :src="require(playing? './images/pause.png':'./images/play.png')" @click.stop='videoOpreation'/> <image :src="require(playing? './images/pause.png':'./images/play.png')" @click.stop='videoOpreation'/>
</view> </view>
<view class="currtime">{{currtime}}</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 @change.stop="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
--> -->
@@ -47,10 +51,10 @@
</view> </view>
<view class="druationTime">{{druationTime}}</view> <view class="druationTime">{{ druationTime }}</view>
<view class="druationTime"> <view class="druationTime">
<view id="myVideoSpeed" class="player-speed btn-speed"> <view id="myVideoSpeed" class="player-speed btn-speed">
<view @click="showSpeedCtrl">{{videoSpeed === 1 ? '倍速' : `${videoSpeed}x`}}</view> <view @click="showSpeedCtrl">{{ videoSpeed === 1 ? '倍速' : `${videoSpeed}x` }}</view>
<view class="speed-control" v-if="speedListShow"> <view class="speed-control" v-if="speedListShow">
<view class="speed-control-list"> <view class="speed-control-list">
<view class="li" <view class="li"
@@ -75,30 +79,34 @@
</view> </view>
</view> </view>
<view v-if="xvideoBool && !drag" 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> <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> <button style="display: inline-block;font-size: 14px;padding: 0px 10px;line-height: 28px;"
v-if="mobileVideoDragSwitch == 'true'" @click="xvideoBoolFun">仍要使用此浏览器观看
</button>
</view>
</view> </view>
</view>
</template> </template>
<script> <script>
import progressBar from "@/components/video-player/progress-bar.vue"; import progressBar from "@/components/video-player/progress-bar.vue";
import {mapGetters} from 'vuex' import {mapGetters} from 'vuex'
import studyUtil from '@/utils/study.js'; import studyUtil from '@/utils/study.js';
import apiManage from '@/api/manage/manage.js'; import apiManage from '@/api/manage/manage.js';
// getDictCode
function agentFullScreen(){ // getDictCode
function agentFullScreen() {
let bool = false let bool = false
let agent = navigator.userAgent let agent = navigator.userAgent
if(agent.indexOf('XiaoMi')!=-1){ if (agent.indexOf('XiaoMi') != -1) {
bool = true bool = true
} }
return bool return bool
} }
//alert(navigator.userAgent +'----'+ agentFullScreen())
export default { //alert(navigator.userAgent +'----'+ agentFullScreen())
components: { progressBar }, export default {
components: {progressBar},
props: { props: {
url:{ url: {
type: String, type: String,
require: true require: true
}, },
@@ -107,19 +115,19 @@
type: String, type: String,
default: null, default: null,
}, },
watermark:{ watermark: {
type: Boolean, type: Boolean,
default: true default: true
}, },
name:{ name: {
type: String, type: String,
default: '' default: ''
}, },
drag:{ drag: {
type: Boolean, type: Boolean,
default: true default: true
}, },
inittime:{//默认播放的位置,第几秒 inittime: {//默认播放的位置,第几秒
type: Number, type: Number,
default: 0 default: 0
}, },
@@ -127,23 +135,23 @@
data() { data() {
return { return {
xvideoBool: agentFullScreen(), // 是否显示视频 xvideoBool: agentFullScreen(), // 是否显示视频
contrlShow:false,//是否显示控制条 contrlShow: false,//是否显示控制条
contrlShowTimeout:null,//显示控制条句柄 contrlShowTimeout: null,//显示控制条句柄
videoContext:null,//播放器 videoContext: null,//播放器
fullScreenFlag: false,//是否全屏 fullScreenFlag: false,//是否全屏
currtime:'00:00',//当前播放时间 字符串 计算后 currtime: '00:00',//当前播放时间 字符串 计算后
druationTime:'00:00',//总时间 字符串 计算后 druationTime: '00:00',//总时间 字符串 计算后
initPlayingTime:0,//指定播放的时间位置 initPlayingTime: 0,//指定播放的时间位置
sliderValue: 0, //控制进度条slider的值， sliderValue: 0, //控制进度条slider的值，
updateState: true, //防止视频播放过程中导致的拖拽失效 updateState: true, //防止视频播放过程中导致的拖拽失效
playing:false,//是否在播放中 playing: false,//是否在播放中
curVideo:{ curVideo: {
duration:0, duration: 0,
currentTime: 0 currentTime: 0
}, },
touchNum:0, touchNum: 0,
speedListShow:false, speedListShow: false,
speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"], speedList: ["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
videoSpeed: 1.0, // 当前倍速: videoSpeed: 1.0, // 当前倍速:
isMousedownProgress: false, // 鼠标是否按下了进度条（并未松开） isMousedownProgress: false, // 鼠标是否按下了进度条（并未松开）
historyTime: 0, // 当前视频 historyTime: 0, // 当前视频
@@ -162,45 +170,45 @@
computed: { computed: {
...mapGetters(['userInfo']), ...mapGetters(['userInfo']),
}, },
watch:{ watch: {
url(newVal,oldVal){ url(newVal, oldVal) {
//console.log( 'watch url:',newVal,oldVal,this.videoContext) //console.log( 'watch url:',newVal,oldVal,this.videoContext)
//document.getElementById('xvideoPlayer').style.display = 'none' //document.getElementById('xvideoPlayer').style.display = 'none'
this.videoContext.stop(); this.videoContext.stop();
this.playing=false; this.playing = false;
this.curVideo.currentTime = 0; this.curVideo.currentTime = 0;
this.iosCurrentTime = 0; this.iosCurrentTime = 0;
this.sliderValue = 0; this.sliderValue = 0;
this.videoSpeed = 1.0; this.videoSpeed = 1.0;
this.currtime = "00:00"; this.currtime = "00:00";
document.getElementsByTagName('video')[0].load() document.getElementsByTagName('video')[0].load()
setTimeout(()=>{ setTimeout(() => {
document.getElementsByTagName('video')[0].play() document.getElementsByTagName('video')[0].play()
},100) }, 100)
//this.videoContext.load(); //this.videoContext.load();
//document.getElementById('xvideoPlayer').style.display = 'block' //document.getElementById('xvideoPlayer').style.display = 'block'
//this.videoContext=uni.createVideoContext("xvideoPlayer", this); //this.videoContext=uni.createVideoContext("xvideoPlayer", this);
}, },
inittime(newVal,oldVal){ inittime(newVal, oldVal) {
this.initPlayingTime=newVal; this.initPlayingTime = newVal;
//console.log('inittime::',newVal,oldVal) //console.log('inittime::',newVal,oldVal)
} }
}, },
mounted() { mounted() {
var _this = this var _this = this
this.initPlayingTime=this.inittime; this.initPlayingTime = this.inittime;
this.videoContext=uni.createVideoContext("xvideoPlayer", this); this.videoContext = uni.createVideoContext("xvideoPlayer", this);
// document.getElementsByTagName('video')[0].load() // document.getElementsByTagName('video')[0].load()
uni.getSystemInfo({ uni.getSystemInfo({
success: function (info) { success: function (info) {
//alert(info.windowWidth) //alert(info.windowWidth)
_this.videoPageWidth=info.windowWidth; _this.videoPageWidth = info.windowWidth;
_this.videoPageHeight=info.windowHeight; _this.videoPageHeight = info.windowHeight;
// 你可以在这里根据窗口高度进行后续操作 // 你可以在这里根据窗口高度进行后续操作
} }
}); });
if(this.xvideoBool) this.dictCode(); if (this.xvideoBool) this.dictCode();
// 每一秒更新进度条 // 每一秒更新进度条
setInterval(() => { setInterval(() => {
@@ -217,20 +225,20 @@
}, 1000); }, 1000);
//绑定全局监听器 //绑定全局监听器
window.addEventListener("touchstart", (e) => { window.addEventListener("touchstart", (e) => {
if(this.speedListShow && !e.target.closest('.speed-control')){ if (this.speedListShow && !e.target.closest('.speed-control')) {
this.speedListShow = false this.speedListShow = false
} }
},{ passive: false }); }, {passive: false});
}, },
methods: { methods: {
xvideoBoolFun(){ xvideoBoolFun() {
this.xvideoBool = false this.xvideoBool = false
}, },
// 获取视频播放器设置开关字典 // 获取视频播放器设置开关字典
dictCode(){ dictCode() {
var _this = this var _this = this
apiManage.getDictCode('mobile_video_switch').then(res=>{ apiManage.getDictCode('mobile_video_switch').then(res => {
if(res.code==200 && res.data[0]){ if (res.code == 200 && res.data[0]) {
_this.mobileVideoDragText = res.data[0].name _this.mobileVideoDragText = res.data[0].name
_this.mobileVideoDragSwitch = res.data[0].value _this.mobileVideoDragSwitch = res.data[0].value
} }
@@ -238,13 +246,13 @@
}, },
/* 点击进度条更新视频播放进度 /* 点击进度条更新视频播放进度
*/ */
updateProgressByClickBar(type,value) { updateProgressByClickBar(type, value) {
let duration = this.curVideo.duration; let duration = this.curVideo.duration;
let second = Math.round(value * duration); let second = Math.round(value * duration);
this.curVideo.currentTime = second; this.curVideo.currentTime = second;
this.sliderValue= value * 100, this.sliderValue = value * 100,
this.druationTime = this.formatSeconds(duration); this.druationTime = this.formatSeconds(duration);
this.currtime = this.formatSeconds(second); this.currtime = this.formatSeconds(second);
@@ -254,13 +262,13 @@
// var second= value * duration; // var second= value * duration;
if (duration) { //完成拖动后，计算对应时间并跳转到指定位置 if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
if(type === 'start'){ if (type === 'start') {
this.updateState= false; this.updateState = false;
} }
if( type === 'end'){ if (type === 'end') {
this.videoContext.seek(second); this.videoContext.seek(second);
this.curVideo.currentTime = second; this.curVideo.currentTime = second;
this.updateState= true //完成拖动后允许更新滚动条 this.updateState = true //完成拖动后允许更新滚动条
//alert('value000------:'+value+'---'+this.curVideo.duration) //alert('value000------:'+value+'---'+this.curVideo.duration)
} }
} }
@@ -271,15 +279,18 @@
this.isMousedownProgress = value; this.isMousedownProgress = value;
}, },
// 全屏+退出全屏 // 全屏+退出全屏
fullScreen(){ fullScreen() {
console.log( "full screen") const u = navigator.userAgent, app = navigator.appVersion;
this.$listeners['fullscreenchange'](this.fullScreenFlag) const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isIOS) {
this.$refs["videoPlayer"].webkitEnterFullscreen()
}
var _this = this var _this = this
if(this.fullScreenFlag){ if (this.fullScreenFlag) {
//this.videoContext.exitFullScreen(); //this.videoContext.exitFullScreen();
this.fullScreenFlag=false; this.fullScreenFlag = false;
// this.horizontalScreenFlag = true // this.horizontalScreenFlag = true
this.videoFullHeight=190 this.videoFullHeight = 190
// if(document && document.exitFullscreen){ // if(document && document.exitFullscreen){
// document.body.scrollTop = 0; // 对Safari // document.body.scrollTop = 0; // 对Safari
@@ -287,21 +298,24 @@
// document.exitFullscreen(); // document.exitFullscreen();
// } // }
}else{ } else {
//this.videoContext.requestFullScreen(); //this.videoContext.requestFullScreen();
this.fullScreenFlag=true; this.fullScreenFlag = true;
if(document.documentElement.requestFullscreen){
if (document.documentElement.requestFullscreen) {
// document.documentElement.requestFullscreen(); // document.documentElement.requestFullscreen();
}else{ } else {
// window.screenTop(0) // window.screenTop(0)
} }
uni.getSystemInfo({ uni.getSystemInfo({
success: function (info) { success: function (info) {
_this.videoFullHeight=info.windowHeight/2 + 130; _this.videoFullHeight = info.windowHeight / 2 + 130;
// 你可以在这里根据窗口高度进行后续操作 // 你可以在这里根据窗口高度进行后续操作
} }
}); });
} }
console.log("full screen")
!isIOS && this.$listeners['fullscreenchange'](this.fullScreenFlag)
}, },
// // 全屏模式下，横屏+竖屏 // // 全屏模式下，横屏+竖屏
// horizontalScreen(){ // horizontalScreen(){
@@ -325,16 +339,16 @@
// }, // },
// 根据秒获取时间 // 根据秒获取时间
formatSeconds(a) { formatSeconds(a) {
var hh = parseInt(a/3600); var hh = parseInt(a / 3600);
var mm = parseInt((a-hh*3600)/60); var mm = parseInt((a - hh * 3600) / 60);
if(mm<10) mm = "0" + mm; if (mm < 10) mm = "0" + mm;
var ss = parseInt((a-hh*3600)%60); var ss = parseInt((a - hh * 3600) % 60);
if(ss<10) ss = "0" + ss; if (ss < 10) ss = "0" + ss;
if(hh<10) hh = hh == 0?'':`0${hh}:`; if (hh < 10) hh = hh == 0 ? '' : `0${hh}:`;
var length = hh + mm + ":" + ss; var length = hh + mm + ":" + ss;
if(a>=0){ if (a >= 0) {
return length; return length;
}else{ } else {
return "00:00"; return "00:00";
} }
}, },
@@ -344,28 +358,28 @@
this.videoSpeed = Number(value); this.videoSpeed = Number(value);
this.videoContext.playbackRate(this.videoSpeed); this.videoContext.playbackRate(this.videoSpeed);
studyUtil.setVideoSpeed(this.videoSpeed); studyUtil.setVideoSpeed(this.videoSpeed);
this.speedListShow=false; this.speedListShow = false;
}, },
showSpeedCtrl(){ showSpeedCtrl() {
if(this.speedListShow){ if (this.speedListShow) {
this.speedListShow=false; this.speedListShow = false;
}else{ } else {
this.speedListShow=true; this.speedListShow = true;
} }
}, },
//开始+暂停 //开始+暂停
videoOpreation() { videoOpreation() {
this.playing ? this.videoContext.pause() : this.videoContext.play(); this.playing ? this.videoContext.pause() : this.videoContext.play();
this.playing= !this.playing; this.playing = !this.playing;
}, },
// 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次 // 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
videoUpdate(e) { videoUpdate(e) {
this.historyTime = e.detail.currentTime this.historyTime = e.detail.currentTime
let duration=this.curVideo.duration; let duration = this.curVideo.duration;
let sliderValue = e.detail.currentTime / duration * 100; let sliderValue = e.detail.currentTime / duration * 100;
let second=sliderValue / 100 * duration; let second = sliderValue / 100 * duration;
// console.log('onTimeUpdate11111::',this.drag,second) // console.log('onTimeUpdate11111::',this.drag,second)
// if(!this.drag){ // if(!this.drag){
// this.videoContext.seek(second); // this.videoContext.seek(second);
@@ -373,10 +387,9 @@
// } // }
if (this.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效 if (this.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
this.sliderValue=sliderValue; this.sliderValue = sliderValue;
}else{ } else {
} }
@@ -396,12 +409,12 @@
// } // }
// } // }
// 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行 // 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行
if(!this.drag){ if (!this.drag) {
var time = localStorage.getItem('videoProgressData') var time = localStorage.getItem('videoProgressData')
var arr = time&&JSON.parse(time) || {} var arr = time && JSON.parse(time) || {}
if(arr[this.blobId] < this.sliderValue/100 || !arr[this.blobId]){ if (arr[this.blobId] < this.sliderValue / 100 || !arr[this.blobId]) {
arr[this.blobId] = parseFloat((this.sliderValue/100).toFixed(8)) arr[this.blobId] = parseFloat((this.sliderValue / 100).toFixed(8))
if(arr[this.blobId]) localStorage.setItem('videoProgressData',JSON.stringify(arr)) if (arr[this.blobId]) localStorage.setItem('videoProgressData', JSON.stringify(arr))
} }
} }
@@ -409,42 +422,42 @@
//拖动过程中触发的事件 //拖动过程中触发的事件
sliderChanging(e) { sliderChanging(e) {
//拖拽过程中，不允许更新进度条 //拖拽过程中，不允许更新进度条
this.updateState= false; this.updateState = false;
}, },
// 拖动slider完成后触发 // 拖动slider完成后触发
sliderChange(e) { sliderChange(e) {
var duration=this.curVideo.duration; var duration = this.curVideo.duration;
var second=e.detail.value / 100 * duration; var second = e.detail.value / 100 * duration;
// alert(e.detail.value + '--slider--'+duration + '--' +second) // alert(e.detail.value + '--slider--'+duration + '--' +second)
if (duration) { //完成拖动后，计算对应时间并跳转到指定位置 if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
this.videoContext.seek(second); this.videoContext.seek(second);
this.sliderValue= e.detail.value, this.sliderValue = e.detail.value,
this.updateState= true //完成拖动后允许更新滚动条 this.updateState = true //完成拖动后允许更新滚动条
this.druationTime = this.formatSeconds(duration); this.druationTime = this.formatSeconds(duration);
this.currtime = this.formatSeconds(second); this.currtime = this.formatSeconds(second);
//alert('3---this.currtime='+this.currtime) //alert('3---this.currtime='+this.currtime)
} }
}, },
onFullScreen(e) { onFullScreen(e) {
this.fullScreenFlag=e.detail.fullScreen; this.fullScreenFlag = e.detail.fullScreen;
let divId='videowatermark';//水印 let divId = 'videowatermark';//水印
let full=e.detail.fullScreen; let full = e.detail.fullScreen;
let divControlId='xplayer-control'; let divControlId = 'xplayer-control';
let box=document.getElementById('xvideoPlayer-box'); let box = document.getElementById('xvideoPlayer-box');
let control=document.getElementById(divControlId); let control = document.getElementById(divControlId);
let $this=this; let $this = this;
setTimeout(() => { setTimeout(() => {
var div = document.getElementById("xvideoPlayer"); var div = document.getElementById("xvideoPlayer");
var div1 = div.firstChild; var div1 = div.firstChild;
//水印 //水印
if(full){ if (full) {
if($this.watermark){ if ($this.watermark) {
var div3 = document.createElement("div"); var div3 = document.createElement("div");
div3.id =divId; div3.id = divId;
div3.setAttribute("class", "fullmark"); div3.setAttribute("class", "fullmark");
div3.innerHTML=''; div3.innerHTML = '';
for(var i=0;i<4;i++){ 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.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"; 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";
div1.appendChild(div3); div1.appendChild(div3);
@@ -452,38 +465,38 @@
} }
//添加控制条 //添加控制条
div1.appendChild(control); div1.appendChild(control);
}else{ } else {
var hasControlDiv=div1.querySelector("#"+divControlId); var hasControlDiv = div1.querySelector("#" + divControlId);
if(hasControlDiv){ if (hasControlDiv) {
box.appendChild(hasControlDiv); box.appendChild(hasControlDiv);
} }
if($this.watermark){ if ($this.watermark) {
var markDiv=div1.querySelector("#"+divId); var markDiv = div1.querySelector("#" + divId);
if(markDiv){ if (markDiv) {
div1.removeChild(markDiv); div1.removeChild(markDiv);
} }
} }
} }
},200); }, 200);
this.$emit('fullscreenchange',e); this.$emit('fullscreenchange', e);
//this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen(); //this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
// this.fullScreenFlag ? this.bool=true : this.bool=false; // this.fullScreenFlag ? this.bool=true : this.bool=false;
//this.fullScreenFlag=!this.fullScreenFlag; //this.fullScreenFlag=!this.fullScreenFlag;
}, },
error(e){ error(e) {
console.log(e,'播放错误'); console.log(e, '播放错误');
this.$emit('error',e); this.$emit('error', e);
}, },
onTouchend(e){ onTouchend(e) {
if(this.contrlShowTimeout!=null){ if (this.contrlShowTimeout != null) {
window.clearTimeout(this.contrlShowTimeout); window.clearTimeout(this.contrlShowTimeout);
} }
if(!this.fullScreenFlag){ if (!this.fullScreenFlag) {
this.contrlShow=!this.contrlShow; this.contrlShow = !this.contrlShow;
}else{ } else {
if(!this.contrlShow){ if (!this.contrlShow) {
this.contrlShow=true; this.contrlShow = true;
} }
} }
// this.onPlayerPause() // this.onPlayerPause()
@@ -502,35 +515,35 @@
// this.touchNum = 0 // this.touchNum = 0
// },250) // },250)
}, },
onLoad(e){ onLoad(e) {
this.contrlShow=false; this.contrlShow = false;
this.$emit('loadeddata',e); this.$emit('loadeddata', e);
}, },
onMetaLoad(e){ onMetaLoad(e) {
this.curVideo.duration=Number(e.detail.duration); this.curVideo.duration = Number(e.detail.duration);
this.druationTime = this.formatSeconds(this.curVideo.duration); this.druationTime = this.formatSeconds(this.curVideo.duration);
this.contrlShow=true; this.contrlShow = true;
this.$emit('loadedmetadata',e); this.$emit('loadedmetadata', e);
}, },
onControlsToggle(e){ onControlsToggle(e) {
console.log(e,"ControlsToggle"); console.log(e, "ControlsToggle");
}, },
// 开始 // 开始
onPlay(){ onPlay() {
this.videoContext.play(); this.videoContext.play();
this.playing=true; this.playing = true;
let $this=this; let $this = this;
if(this.contrlShow){ if (this.contrlShow) {
this.contrlShowTimeout=window.setTimeout(function(){ this.contrlShowTimeout = window.setTimeout(function () {
$this.contrlShow=false; $this.contrlShow = false;
},5000); }, 5000);
} }
this.$emit('play') this.$emit('play')
}, },
onTimeUpdate(e){ onTimeUpdate(e) {
this.currtimeText = this.currtimeText + 1 this.currtimeText = this.currtimeText + 1
this.videoUpdate(e); this.videoUpdate(e);
this.$emit('timeupdate',e) this.$emit('timeupdate', e)
}, },
/* 更新视频进度的文字显示 /* 更新视频进度的文字显示
*/ */
@@ -542,7 +555,7 @@
/* 时间格式化，秒格式化成xx:xx:xx /* 时间格式化，秒格式化成xx:xx:xx
*/ */
secondTimeFormat(second) { secondTimeFormat(second) {
if(second<0) second = 0; if (second < 0) second = 0;
let result = parseInt(second); let result = parseInt(second);
let h = let h =
Math.floor(result / 3600) < 10 Math.floor(result / 3600) < 10
@@ -560,27 +573,28 @@
return result; return result;
}, },
onPause() { onPause() {
this.playing=false; this.playing = false;
this.$emit('pause') this.$emit('pause')
}, },
onEnded(){ onEnded() {
this.playing=false; this.playing = false;
if(this.fullScreenFlag){ if (this.fullScreenFlag) {
this.fullScreen() this.fullScreen()
} }
this.$emit('ended') this.$emit('ended')
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.video-box{ .video-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
} }
.video-box-error{
.video-box-error {
width: 100%; width: 100%;
height: 110px; height: 110px;
padding: 55px 0; padding: 55px 0;
@@ -589,8 +603,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.video-full-screen{
.video-full-screen {
position: fixed; position: fixed;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@@ -598,88 +613,103 @@
z-index: 9999999; z-index: 9999999;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.video-scree-rotate{
.video-scree-rotate {
transform: rotate(90deg); transform: rotate(90deg);
// width: 100vw; // width: 100vw;
// height: 100vh; // height: 100vh;
position: fixed; position: fixed;
} }
.screen{
.screen {
position: relative; position: relative;
} }
.screen-full{
position:static; .screen-full {
} position: static;
.process-container{ }
width:100%;
padding:1% 2% 1% 2%; .process-container {
height:60rpx; width: 100%;
max-height:60rpx; padding: 1% 2% 1% 2%;
position:absolute; height: 60rpx;
bottom:0rpx; max-height: 60rpx;
color:#ffffff; position: absolute;
left:0; bottom: 0rpx;
right:0; color: #ffffff;
z-index:9999; left: 0;
display:flex; right: 0;
z-index: 9999;
display: flex;
align-items: center; align-items: center;
background:rgba(59, 57, 57, 0.2); background: rgba(59, 57, 57, 0.2);
} }
.process-container image{
max-width:30rpx; .process-container image {
max-height:30rpx; max-width: 30rpx;
text-align:center; max-height: 30rpx;
} text-align: center;
.slider-container{ }
z-index:13;
height:60rpx; .slider-container {
margin-bottom:10rpx; z-index: 13;
flex:6; height: 60rpx;
max-width:50%; margin-bottom: 10rpx;
} flex: 6;
.slider-container.new-bar{ max-width: 50%;
}
.slider-container.new-bar {
margin: 7px 10px 10px 10px; margin: 7px 10px 10px 10px;
} }
.controller-play{
.controller-play {
width: 8%; width: 8%;
} }
.controller-screen{
.controller-screen {
// width: 10%; // width: 10%;
} }
.currtime{
.currtime {
color: #ffffff; color: #ffffff;
font-size: 22rpx; font-size: 22rpx;
width: 11%; width: 11%;
height: 100%; height: 100%;
line-height: 60rpx; line-height: 60rpx;
text-align: center; text-align: center;
} }
.druationTime{
.druationTime {
color: #ffffff; color: #ffffff;
font-size: 22rpx; font-size: 22rpx;
width: 12%; width: 12%;
height: 100%; height: 100%;
line-height: 60rpx; line-height: 60rpx;
text-align: center; text-align: center;
} }
.player-speed{
.player-speed {
position: relative; position: relative;
color: #e5e5e5; color: #e5e5e5;
padding: 0 0.4rem; padding: 0 0.4rem;
transition: color 0.3s; transition: color 0.3s;
height: 22px; height: 22px;
} }
.btn-speed:hover .speed-control {
.btn-speed:hover .speed-control {
// visibility: visible; // visibility: visible;
} }
.speed-control {
.speed-control {
position: absolute; position: absolute;
//top: 180px; //top: 180px;
transition: visibility 0.3s; transition: visibility 0.3s;
transform: translate(-50%, -100%); transform: translate(-50%, -100%);
} }
.speed-control .speed-control-list {
.speed-control .speed-control-list {
list-style: none; list-style: none;
color: #e5e5e5; color: #e5e5e5;
width: 50px; width: 50px;
@@ -690,20 +720,23 @@
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
background: rgba(21, 21, 21, 0.8); background: rgba(21, 21, 21, 0.8);
} }
.speed-control .speed-control-list .li {
.speed-control .speed-control-list .li {
position: relative; position: relative;
display: block; display: block;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
} }
.speed-control .speed-control-list .li:hover {
.speed-control .speed-control-list .li:hover {
color: #fff; color: #fff;
background: rgba(99, 99, 99, 0.8); background: rgba(99, 99, 99, 0.8);
} }
.speed-control .speed-control-list .li.current {
.speed-control .speed-control-list .li.current {
color: var(--primaryColor); color: var(--primaryColor);
} }
</style> </style>

2
unpackage/dist/build/h5/index.html vendored
View File

@@ -19,4 +19,4 @@
hm.src = "https://hm.baidu.com/hm.js?ea89f02dca369037a73c5e3907e2c14a"; hm.src = "https://hm.baidu.com/hm.js?ea89f02dca369037a73c5e3907e2c14a";
var s = document.getElementsByTagName("script")[0]; var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s); s.parentNode.insertBefore(hm, s);
})();</script></head><body><div id=app></div><script src=/mobile/static/js/chunk-vendors.b01deae1.js></script><script src=/mobile/static/js/index.e1d59393.js></script></body></html> })();</script></head><body><div id=app></div><script src=/mobile/static/js/chunk-vendors.b01deae1.js></script><script src=/mobile/static/js/index.72abe792.js></script></body></html>

2
unpackage/dist/build/h5/static/js/index.e1d59393.js → unpackage/dist/build/h5/static/js/index.72abe792.js vendored
View File

File diff suppressed because one or more lines are too long

1
unpackage/dist/build/h5/static/js/pages-study-courseStudy.34df5209.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
unpackage/dist/build/h5/static/js/pages-study-courseStudy.df2ee870.js vendored
View File

File diff suppressed because one or more lines are too long

1
unpackage/dist/build/h5/static/js/pages-study-videoTest.47b4f767.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
unpackage/dist/build/h5/static/js/pages-study-videoTest.82a4c1b5.js vendored
View File

File diff suppressed because one or more lines are too long