diff --git a/components/video-player/video-player.vue b/components/video-player/video-player.vue
index e4c384f..b6a9bf2 100644
--- a/components/video-player/video-player.vue
+++ b/components/video-player/video-player.vue
@@ -3,20 +3,19 @@
+ @loadeddata="onLoad"
+ @loadedmetadata="onMetaLoad"
+ @controlstoggle="onControlsToggle"
+ >
@@ -24,7 +23,7 @@
{{currtime}}
-
+
{{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);
diff --git a/pages/study/videoTest.vue b/pages/study/videoTest.vue
index 1ff3db6..36bea91 100644
--- a/pages/study/videoTest.vue
+++ b/pages/study/videoTest.vue
@@ -4,11 +4,13 @@
+ @play="videoPlay"
+ @pause="videoPause"
+ @playing="videoPlaying"
+ @ended="videoEnd"
+ @fullscreenchange="videoScreen">