mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-09 19:06:46 +08:00
2022年5月29日 从svn移到git
This commit is contained in:
daihh
191
components/video-player/video-player.vue
Normal file
191
components/video-player/video-player.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<video id="myVideo" style="width: 100%;"
|
||||
:src="fileBaseUrl+coursewareInfo.content.content"
|
||||
@error="videoErrorCallback"
|
||||
:initial-time="videoPlayingTime"
|
||||
@play="onPlayerPlay"
|
||||
@pause="onPlayerPause"
|
||||
@ended="onPlayerEnded"
|
||||
@timeupdate="onPlayerPlaying"
|
||||
@fullscreenchange="onFullScreen"
|
||||
controls>
|
||||
<view class='process-container'>
|
||||
<view class="video-controls-play">
|
||||
<image :src="palyFlag ? '../../static/img/start.png' : '../../static/img/pause.png'" class='video-controls-icon' @click='videoOpreation'/>
|
||||
</view>
|
||||
<view class="currtime">{{currtime}}</view>
|
||||
<view class='slider-container'>
|
||||
<slider @change="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="16rpx"/>
|
||||
</view>
|
||||
<view class="druationTime">{{druationTime}}</view>
|
||||
<image :src="fullScreenFlag ? '../../static/img/videoBack.png' : '../../static/img/fullScreen.png'" class='video-controls-icon' @click='videoAllscreen'></image>
|
||||
</view>
|
||||
</video>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
url:{
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
initTime:{//默认播放的位置,第几秒
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fullScreenFlag: false,
|
||||
currtime:'00:00:00',//当前播放时间 字符串 计算后
|
||||
druationTime:'00:00:00',//总时间 字符串 计算后
|
||||
bool:false,
|
||||
sliderValue: 0, //控制进度条slider的值，
|
||||
updateState: false, //防止视频播放过程中导致的拖拽失效
|
||||
palyFlag:false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// video_back: function (e) {
|
||||
// this.fullScreenFlag ? this.videoContext.requestFullScreen() : this.videoContext.exitFullScreen();
|
||||
// // this.fullScreenFlag ? this.bool=false : this.bool=true;
|
||||
// this.fullScreenFlag= !this.fullScreenFlag;
|
||||
// },
|
||||
// 全屏+退出全屏
|
||||
videoAllscreen(e) {
|
||||
this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
|
||||
// this.fullScreenFlag ? this.bool=true : this.bool=false;
|
||||
this.fullScreenFlag=!this.fullScreenFlag;
|
||||
},
|
||||
// 根据秒获取时间
|
||||
formatSeconds(a) {
|
||||
var hh = parseInt(a/3600);
|
||||
var mm = parseInt((a-hh*3600)/60);
|
||||
if(mm<10) mm = "0" + mm;
|
||||
var ss = parseInt((a-hh*3600)%60);
|
||||
if(ss<10) ss = "0" + ss;
|
||||
if(hh<10) hh = hh == 0?'':`0${hh}:`;
|
||||
var length = hh + mm + ":" + ss;
|
||||
if(a>=0){
|
||||
return length;
|
||||
}else{
|
||||
return "00:00";
|
||||
}
|
||||
},
|
||||
//开始+暂停
|
||||
videoOpreation() {
|
||||
this.palyFlag ? this.videoContext.play() : this.videoContext.pause();
|
||||
this.palyFlag= !this.palyFlag;
|
||||
},
|
||||
// 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
|
||||
videoUpdate(e) {
|
||||
let duration=this.live.liveRoomRecordList[0].duration;
|
||||
let sliderValue = e.detail.currentTime / duration * 100;
|
||||
let second=sliderValue / 100 * duration;
|
||||
if (this.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
|
||||
this.sliderValue=sliderValue;
|
||||
}else{
|
||||
|
||||
}
|
||||
this.druationTime = this.formatSeconds(duration);
|
||||
this.currtime = this.formatSeconds(second);
|
||||
},
|
||||
//拖动过程中触发的事件
|
||||
sliderChanging(e) {
|
||||
//拖拽过程中，不允许更新进度条
|
||||
this.updateState= false;
|
||||
},
|
||||
// 拖动slider完成后触发
|
||||
sliderChange(e) {
|
||||
var duration=this.live.liveRoomRecordList[0].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);
|
||||
}
|
||||
else { }
|
||||
},
|
||||
// 开始
|
||||
contrPlay(){
|
||||
this.videoContext.play();
|
||||
this.palyFlag=false;
|
||||
},
|
||||
// 暂停
|
||||
pause() {
|
||||
this.videoContext.pause(); //站厅播放
|
||||
this.palyFlag=true;
|
||||
},
|
||||
stop(){
|
||||
this.videoContext.stop(); //
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.process-container{
|
||||
width:100%;
|
||||
padding:1% 2% 1% 2%;
|
||||
height:60rpx;
|
||||
max-height:60rpx;
|
||||
position:absolute;
|
||||
bottom:40rpx;
|
||||
left:0;
|
||||
right:0;
|
||||
z-index:13;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
background:rgba(59, 57, 57, 0.2);
|
||||
}
|
||||
.process-container image{
|
||||
display:inline-block;
|
||||
flex:1;
|
||||
max-width:50rpx;
|
||||
max-height:50rpx;
|
||||
text-align:center;
|
||||
}
|
||||
.slider-container{
|
||||
z-index:13;
|
||||
height:60rpx;
|
||||
margin-bottom:10rpx;
|
||||
flex:6;
|
||||
max-width:58%;
|
||||
}
|
||||
.video-controls-play{
|
||||
width: 8%;
|
||||
}
|
||||
.currtime{
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
width: 11%;
|
||||
height: 100%;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.druationTime{
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
width: 12%;
|
||||
height: 100%;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.video_back{
|
||||
display:block;
|
||||
width:60rpx;
|
||||
height:60rpx;
|
||||
left:5rpx;
|
||||
top:15rpx;
|
||||
position:absolute;
|
||||
text-align:center;
|
||||
z-index:19;
|
||||
}
|
||||
.video_back image{
|
||||
width:44rpx;
|
||||
height:44rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user