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

视频组件

Browse Source
This commit is contained in:
daihh
2022-11-18 13:59:04 +08:00
parent 63bc86aee8
commit 4e1f9033eb
2 changed files with 88 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,20 +3,19 @@
<video id="myVideo" style="width: 100%;"
:src="url"
:controls="false"
:initial-time="videoPlayingTime"
@error="videoErrorCallback"
@touchend="onPlayerTouchend"
@play="onPlayerPlay"
@pause="onPlayerPause"
@ended="onPlayerEnded"
@timeupdate="onPlayerPlaying"
:enable-play-gesture="true"
:initial-time="initPlayingTime"
@error="onError"
@touchend="onTouchend"
@play="onPlay"
@pause="onPause"
@ended="onEnded"
@timeupdate="onPlaying"
@fullscreenchange="onFullScreen"
@loadeddata="onPalyerLoad"
@loadedmetadata="onPlayerMetaLoad"
@controlstoggle="onPlayerControlsToggle"
@dblclick="dbclickVideo"
>
</video>
@loadeddata="onLoad"
@loadedmetadata="onMetaLoad"
@controlstoggle="onControlsToggle"
></video>
<view v-if="contrlShow">
<view class="process-container">
<view class="controller-play">
@@ -24,7 +23,7 @@
</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="12"/>
<slider :disabled="!drag" @change="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
</view>
<view class="druationTime">{{druationTime}}</view>
<view class="druationTime">
@@ -60,7 +59,15 @@
type: String,
require: true
},
initTime:{//默认播放的位置,第几秒
name:{
type: String,
default: ''
},
drag:{
type: Boolean,
default: true
},
inittime:{//默认播放的位置,第几秒
type: Number,
default: 0
},
@@ -73,13 +80,14 @@
fullScreenFlag: false,//是否全屏
currtime:'00:00',//当前播放时间 字符串 计算后
druationTime:'00:00',//总时间 字符串 计算后
videoPlayingTime:0,//指定播放的时间位置
initPlayingTime:0,//指定播放的时间位置
sliderValue: 0, //控制进度条slider的值，
updateState: false, //防止视频播放过程中导致的拖拽失效
updateState: true, //防止视频播放过程中导致的拖拽失效
playing:false,//是否在播放中
curVideo:{
duration:0
},
touchNum:0,
speedListShow:false,
speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
videoSpeed: 1.0, // 当前倍速:
@@ -88,30 +96,26 @@
computed: {
...mapGetters(['userInfo']),
},
created() {
watch:{
url(newVal,oldVal){
this.videoContext.pause();
this.playing=false;
},
inittime(newVal,oldVal){
this.initPlayingTime=newVal;
}
},
mounted() {
this.initPlayingTime=this.inittime;
this.videoContext=uni.createVideoContext("myVideo", this);
},
methods: {
// 全屏+退出全屏
fullScreen(){
this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
// this.fullScreenFlag ? this.bool=true : this.bool=false;
this.fullScreenFlag=!this.fullScreenFlag;
},
onFullScreen(e) {
this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
// this.fullScreenFlag ? this.bool=true : this.bool=false;
this.fullScreenFlag=!this.fullScreenFlag;
},
videoErrorCallback(e){
console.log(e,'播放错误');
},
// 根据秒获取时间
formatSeconds(a) {
var hh = parseInt(a/3600);
@@ -176,8 +180,7 @@
this.updateState= true //完成拖动后允许更新滚动条
this.druationTime = this.formatSeconds(duration);
this.currtime = this.formatSeconds(second);
}
else { }
}
},
clickVideo(){
// if(this.contrlShowTimeout!=null){
@@ -185,59 +188,70 @@
// }
// this.contrlShow=!this.contrlShow;
},
dblclickVideo(){
console.log("双击了");
onFullScreen(e) {
this.$emit('fullscreenchange',e);
//this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
// this.fullScreenFlag ? this.bool=true : this.bool=false;
//this.fullScreenFlag=!this.fullScreenFlag;
},
onPlayerTouchend(e){
onError(e){
console.log(e,'播放错误');
this.$emit('error',e);
},
onTouchend(e){
// this.onPlayerPause()
this.touchNum ++
setTimeout(()=>{
if(this.touchNum == 1){
// console.log('单击')
}else if(this.touchNum >= 2){
if(this.isPlaying){
this.onPlayerPause()
} else {
this.onPlayerPlay()
}
}
this.touchNum = 0
},250)
// this.touchNum ++
// let $this=this;
// setTimeout(()=>{
// if($this.touchNum == 1){
// // console.log('单击')
// }else if($this.touchNum >= 2){
// if($this.playing){
// $this.onPause()
// } else {
// $this.onPlay()
// }
// }
// this.touchNum = 0
// },250)
},
onPlayerLoad(e){
onLoad(e){
this.contrlShow=false;
this.$emit('loadeddata',e);
},
onPlayerMetaLoad(e){
onMetaLoad(e){
this.curVideo.duration=Number(e.detail.duration);
this.druationTime = this.formatSeconds(this.curVideo.duration);
this.$emit('loadedmetadata',e);
},
onPlayerControlsToggle(e){
onControlsToggle(e){
console.log(e,"ControlsToggle");
},
// 开始
onPlayerPlay(){
onPlay(){
this.videoContext.play();
this.playing=true;
this.contrlShow=true;
},
onPlayerPlaying(e){
this.playing=true;
this.updateState=true;
this.videoUpdate(e);
//this.contrlShow=true;
// let $this=this;
// if(this.contrlShow){
// this.contrlShowTimeout=window.setTimeout(function(){
// $this.contrlShow=false;
// },5000);
// }
this.$emit('play')
},
// 暂停
onPlayerPause() {
this.videoContext.pause(); //站厅播放
this.playing=false;
onPlaying(e){
this.playing=true;
this.videoUpdate(e);
this.$emit('playing',e)
},
onPlayerEnded(){
onPause() {
this.playing=false;
this.$emit('pause')
},
onEnded(){
this.playing=false;
this.$emit('ended')
}
}
}
@@ -259,7 +273,7 @@
color:#ffffff;
left:0;
right:0;
z-index:99;
z-index:9999;
display:flex;
align-items: center;
background:rgba(59, 57, 57, 0.2);

14
pages/study/videoTest.vue
View File

@@ -4,11 +4,13 @@
<video-player
:url="fileUrl"
:name="title"
:inittime="initTime"
:drag="true"
@onPlay="videoPlay"
@onPause="videoPause"
@onPlaying="videoPlaying"
@onEnded="videoEnd">
@play="videoPlay"
@pause="videoPause"
@playing="videoPlaying"
@ended="videoEnd"
@fullscreenchange="videoScreen">
</video-player>
</view>
<!-- <view style="padding-top: 30px;display: flex;justify-content: center;">
@@ -22,6 +24,7 @@
data(){
return {
fileUrl:'/static/temp/test.mp4',
initTime:20,
title:'测试播放',
author:'',
}
@@ -51,6 +54,9 @@
},
videoPlaying(){
console.log('videoPlaying');
},
videoScreen(e){
console.log('全屏',e);
}
}
}