当前位置: 首页 > Web前端 > vue.js

videojs7自定义控制按钮

时间:2023-04-01 01:07:18 vue.js

//视频播放if(!this.player){letthat=thisthis.player=videojs("#videoPlayer",this.videoOptions,functiononPlayerReady(this:any){console.log('onPlayerReady',this);//varhdButtonEl=videojs.createEl('button',{className:'vjs-hd-buttonvjs-control',//'role':'button'//});//consthdButton=newvideojs.BigPlayButton(this.player_,this.videoOptions);//console.log(hdButton,'hdButton')//newvideojs.BigPlayButton(this.player_,{children:[]});this.on('ended',function(next){console.log('ended',next);that.nextVideo()})})console.log('player',this.player);this.$nextTick(()=>{/*添加上一个*/varButton=videojs.getComponent('Button');////扩展默认//varPrevButton=videojs.extend(Button,{////构造ctor:function(player,options){//constructor:function(){//Button.apply(this,arguments);////this.addClass('vjs-chapters-button');//this.addClass('icon-angle-left');//this.controlText("上一个");//},////构造函数:function(){////Button.apply(this,arguments);////this.addClass('vjs-play-controlvjs-controlvjs-buttonvjs-paused');////},////createEl:function(){////returnButton.prototype.createEl('button',{//////className:'vjs-next-buttonvjs-controlvjs-button',//////innerHTML:'Next>'////});////},//handleClick:function(){//console.log('click');////播放器.playlist.previous();//}//});//扩展默认值//varNextButton=videojs.extend(Button,{////constructor:function(player,options){//constructor:function(){//Button.apply(this,arguments);////this.addClass('vjs-chapters-button');//this.addClass('icon-angle-right');////this.addClass('iconaufontAllh-icon-all-right-o');//this.controlText("Next");//},//handleClick:function(){//console.log('click');////player.playlist.next();//}//});//注册新组件//videojs.registerComponent('NextButton',NextButton);//videojs.registerComponent('PrevButton',PrevButton);//player.getChild('controlBar').addChild('SharingButton',{});//this.player.getChild('controlBar').addChild('PrevButton',{},0);//this.player.getChild('controlBar').addChild('NextButton',{},2);常量自我=这个;constComponent=videojs.getComponent("组件");//constButton=videojs.getComponent("Button");classPrevButtonextendsButton{constructor(player,options={}){super(player,options);console.log(播放器,选项);this.controlText("上一个");//this.on(player,"play",this.handlePlay);//this.on(播放器,"暂停",this.handlePaused);//this.on(this.el(),["click","tap"],this.handleControlClick);}buildCSSClass(){return"vjs-play-control-btniconaufontAll快进h-icon-all-fast-backward";//返回`vjs-play-control${super.buildCSSClass()}`}//handlePlay(e){//console.log(111);////this.removeClass('vjs-ended')//this.removeClass("vjs-paused");//this.addClass("vjs-playing");//this.controlText("暂停");////self.$emit('play')//}//handlePaused(e){//console.log(111);//this.removeClass("vjs-playing");//this.addClass("vjs-paused");//this.controlText("播放");////self.$emit('play')//}//handleControlClick(e){//console.log(111);////console.log(this)//this.player_.paused()?this.player_.play():this.player_.pause();////self.$emit('play')//}//getPlayStatus(){//返回“状态”;//}handleClick(){console.log('Previous');//player.playlist.next();}}类sNextButtonextendsButton{constructor(player,options={}){super(player,options);console.log(播放器,选项);this.controlText("下一步");//this.on(player,"play",this.handlePlay);//this.on(播放器,"暂停",this.handlePaused);//this.on(this.el(),["click","tap"],this.handleControlClick);}buildCSSClass(){return"vjs-play-control-btniconaufontAllfast-forwardh-icon-all-fast-forward";//返回`vjs-play-control${super.buildCSSClass()}`}//handlePlay(e){//console.log(111);////this.removeClass('vjs-ended')//this.removeClass("vjs-paused");//this.addClass("vjs-playing");//this.controlText("暂停");////self.$emit('play')//}//handlePaused(e){//控制台日志(111);//this.removeClass("vjs-playing");//this.addClass("vjs-paused");//this.controlText("播放");////self.$emit('play')//}//handleControlClick(e){//console.log(111);////console.log(this)//this.player_.paused()?this.player_.play():this.player_.pause();////self.$emit('play')//}//getPlayStatus(){//返回“状态”;//}handleClick(){console.log('下一步');//player.playlist.next();}}Component.registerComponent("PrevButton",PrevButton);Component.registerComponent("NextButton",NextButton);this.player.getChild('controlBar').addChild('PrevButton',{},0);this.player.getChild('controlBar').addChild('NextButton',{},2);})}添加视频播放上一曲下一曲播放按钮,最终效果