This time I will bring you a detailed explanation of the steps for customizing the vue-video-player player. What are the precautions for customizing the vue-video-player player? The following is a practical case. Let’s take a look. one time.

Figure 1--Show the sidebar

Figure 2-Collapse the sidebar;

Figure 3: Full screen.

Written in front

You need to use vue in this project, vue-video-player , I use the ui framework of iview, but the ui framework does not matter. What I focus on here is the use of vue-video-player developed based on video.js, and how to operate the API in video.js.

vue-video-player Project address: https://github.com/surmon-china/vue-video-player.

video.js document address: http://docs.videojs.com/docs/api/player.html.

Project directory:

1. Outer ui layout

Figure 1 As you can see, this project uses a two-column adaptive layout. The right side is the playlist with a fixed width of 500px, and the left side is the player box. The playlist box can be expanded or collapsed according to the click of the handle, and the player The box also adapts its width according to the expansion/contraction of the playlist.

(Because the recorded animation is too large to be uploaded, you can clone my program and run it to see it).

The html code structure is as follows:

##Add an excessive animation when shrinking and expanding. Here we choose to use css handwritten animation:

[css] view plain copy
.transition{  
       transition: all 1s ease;  
       -moz-transition: all 1s ease;  
       -webkit-transition: all 1s ease;   
       -o-transition: all 1s ease;   
   }  
[css] view plain copy
.toLeft{  
        .transition;  
        
margin-right
: 540px !important;  
    }  
    .toRight{  
        .transition;  
        margin-right: 40px !important;  
    }  
    .toHide{  
        .transition;  
        right: -500px !important;  
    }  
    .toShow{  
        .transition;  
        right: 0px !important;  
    }  
[css] view plain copy
// 播放區(qū)  
    .player-box{  
        margin-right: 540px;  
        height: 100%;  
        position: relative;  
         
    }  
    [css] view plain copy
//側(cè)邊信息區(qū)  
    .info-box{  
        width: 520px;  
        height: 100%;  
        background: transparent;      
        position: relative;  
        overflow: hidden;  
    ｝ 
[css] view plain copy
// 內(nèi)容區(qū)  
.content{  
    background: #292929;  
    position: relative;  
    padding: 20px 0 20px 20px;  
  
}

2. Player ui

The entire custom player ui is encapsulated into a component-CostomVedio.vue, and the playback area uses vue-video- player, but the bottom control bar is customized and does not use the controlBar that comes with the player. Usually these common ones do not meet the requirements of the designer, so we need to customize the player UI.

The html structure code is as follows:

[html] view plain copy
<template>  
    <p class="custom-video-outer-box" @mouseover="videoMouseOver">  
      <video-player  class="video-player-box"  
                 ref="videoPlayer"  
                 :options="playerOptions"  
                 :playsinline="true"  
                 customEventName="customstatechangedeventname"  
                 @play="onPlayerPlay($event)"  
                 @pause="onPlayerPause($event)"  
                 @ended="onPlayerEnded($event)"  
                 @waiting="onPlayerWaiting($event)"  
                 @playing="onPlayerPlaying($event)"  
                 @loadeddata="onPlayerLoadeddata($event)"     
                 @timeupdate="onPlayerTimeupdate($event)"  
                 @statechanged="playerStateChanged($event)"  
                 @ready="playerReadied"  
                 >  
                   
                  <!-- @canplay="onPlayerCanplay($event)" -->  
                   <!-- @canplaythrough="onPlayerCanplaythrough($event)" -->  
                  
       </video-player>  
       <!-- 底部進(jìn)度條 start -->  
         <transition name="fade">  
                <p class="bottomCtrl" v-show="isBottomCtrlShow" id="bottomCtrl">  
                    <!--  -->  
                    <!-- <p class="bottomCtrl" v-show="false"> -->  
                <!-- <p class="bottomCtrl"  > -->  
                      
                    <Slider v-model="playerCtrl.currentTimeInt" class="progress-slider" :max="playerCtrl.durationInt" :tip-format="progressTipFormat" @on-change="progressChange"></Slider>  
                    <p class="clearfix" >  
                        <p class="left">  
                                <!-- 暫停 -->  
                                <span v-on:click="play" v-if="!playerCtrl.isPlay" class="icon">  
                                    <Icon type="play"></Icon>  
                                </span>  
                                <!-- 播放 -->  
                                <span v-else v-on:click="pause" class="icon">  
                                     <Icon type="stop"></Icon>  
                                </span>  
                                 
                                <!-- 下一曲 -->  
                                <span class="icon" v-on:click="nextClick">  
                                    <Icon type="skip-forward"></Icon>  
                                </span>  
                                      <span>  
                                {{playerCtrl.currentTime}}/{{playerCtrl.duration}}  
                            </span>  
                        </p>  
                        <p class="right clearfix">  
                                <p class="voice-box clearfix left">   
                                    <!-- 音量 -->  
                                    <Icon type="volume-medium" class="left icon"></Icon>  
                                    <Slider v-model="playerCtrl.voiceSlider" class="voice-slider left " max=100 @on-change="volumeChange"></Slider>  
                                </p>  
                                 <!-- 全屏 -->  
                                 <span class="icon left" @click="fullScreenHandle">  
                                    <Icon type="crop" ></Icon>  
                                 </span>  
                        </p>  
                    </p>  
                </p>  
         </transition>  
       </p>  
  </template> 
具體思路就是，使用播放器鋪滿播放區(qū)，使用position定位將自定義的controlBar固定在播放區(qū)的底部，這里注意controlBar的z-index一定要足夠大，否則在全屏的時(shí)候不在最上層看不到。
css樣式：
[css] view plain copy
<style>  
    .video-player-box{  
        height: 100% !important;  
        width: 100% !important;  
    }  
    //底部進(jìn)度條  
    .bottomCtrl{  
        line-height: 60px;  
        height: 60px;  
        overflow: visible;  
        position: absolute;  
        bottom: 0;  
        left: 0;  
        background-color: rgba(45, 45, 45, .92);  
        width: 100%;  
        padding: 0 50px;  
        color: #fff;  
        z-index: 999999999999999;  
  
        .icon{  
            font-size: 16px;  
            line-height: 60px;  
            cursor: pointer;  
        }  
  
        .icon+.icon{  
            margin-left: 20px;  
        }  
    }  
    .custom-video-outer-box{  
        position: relative;  
        height: 100%;  
        width: 100%;  
    }  
    .progress-slider{  
        position: absolute;  
        width: 100%;  
        top: 0;  
        left: 0;  
        height: 18px;  
        line-height: 18px;  
        .ivu-slider-wrap{  
            margin: 0 !important;  
            border-radius: 0 !important;  
        }  
        .ivu-slider-button-wrap{  
             line-height: normal !important;  
        }  
        .ivu-slider-button{  
            height: 8px !important;  
            width: 8px !important;  
             
        }  
    }  
    .voice-box{  
        .voice-slider{  
            width: 100px;  
            margin-left: 20px;  
        }  
        .ivu-slider-wrap{  
            margin: 27px 0 !important;  
        }  
  
    }  
    .time{  
        margin-left: 25px;  
    }  
    .full-screen{  
       margin-left: 25px;  
        line-height: 60px;  
    }  
    
    .ivu-progress-outer{  
        padding: 0 10px !important;  
    }  
      
    .vjs-big-play-button{  
        height: 80px !important;  
        width: 80px !important;  
        line-height: 80px !important;  
        text-align: center;  
        background:rgba(0, 0, 0, 0.8) !important;  
        border-radius: 50% !important;  
        top: 50% !important;  
        left: 50% !important;  
        margin-left: -40px !important;  
        margin-top: -40px !important;  
    }  
    #vjs_video_3{  
        max-height: 100% !important;  
        width: 100% !important;  
        height: 100% !important;  
    }  
    .video-player-box>p{  
        height: 100% !important;  
        width: 100% !important;  
    }  
    .video-js .vjs-big-play-button{  
        font-size: 5em !important;  
    }  
    video{  
        max-height: 100% !important;  
  
    }  
     
</style>

3. Implement the custom controlBar function

The next step is to implement the custom controlBar Functions such as play, pause, next song, play progress, remaining time, full screen, volume adjustment, etc.

Here we must first look at the corresponding API of video.js. Although it is in English, it is written very clearly and is easy to understand.

video.js api document address: http://docs.videojs.com/docs/api/player.html

1. Play, pause, next song, full screen are mainly for monitoring We add a custom button click event, and then call the player API to perform the corresponding operation and change the state.

[javascript] view plain copy
// 播放  
 play(){  
     this.player.play();  
 },  
 // 暫停  
 pause(){  
      this.player.pause();  
 },  
 //下一曲  
 nextClick(){  
     console.log("自定義","下一曲點(diǎn)擊");  
      
 },  
 //全屏  
 fullScreenHandle(){  
     console.log("全屏");  
     if(!this.player.isFullscreen()){  
         this.player.requestFullscreen();  
         this.player.isFullscreen(true);  
     }else{  
          this.player.exitFullscreen();  
          this.player.isFullscreen(false);  
     }  
 },

Of course, the player in vue-video-player will monitor state changes in the callback method:

[html] view plain copy
<video-player  class="video-player-box"  
                ref="videoPlayer"  
                :options="playerOptions"  
                :playsinline="true"  
                customEventName="customstatechangedeventname"  
                @play="onPlayerPlay($event)"  
                @pause="onPlayerPause($event)"  
                @ended="onPlayerEnded($event)"  
                @waiting="onPlayerWaiting($event)"  
                @playing="onPlayerPlaying($event)"  
                @loadeddata="onPlayerLoadeddata($event)"     
                @timeupdate="onPlayerTimeupdate($event)"  
                @statechanged="playerStateChanged($event)"  
                @ready="playerReadied"  
                >  
                  
                 <!-- @canplay="onPlayerCanplay($event)" -->  
                  <!-- @canplaythrough="onPlayerCanplaythrough($event)" -->  
                 
      </video-player>

We can change our behavior accordingly based on these state changes. UI, such as displaying a "pause" button when playing, displaying "play" and other functions when pausing.

2. Playback progress, remaining time, volume adjustment

The playback progress is based on the currentTime method in the player onPlayerTimeupdate() callback method to obtain the current playback progress. Time, unit S, because I am using slider here, and the progress is calculated by integers, so I need two variables to store here, one is in integer form, and the other is the string form after formatting hours, minutes and seconds for display.

[javascript] view plain copy
//時(shí)間更新    
           onPlayerTimeupdate(player){  
               this.playerCtrl.currentTime=timeUtil.secondToDate(player.currentTime());  
               this.playerCtrl.currentTimeInt=Math.floor(player.currentTime());  
               console.log("當(dāng)前音量",player.volume());  
           },

Fixed-point playback, that is, the user clicks somewhere on the progress bar to progress the playback at this point. The slider's

[html] view plain copy
@on-change=" progressChange"

This method monitors the fixed point of the slider,

[javascript] view plain copy
//進(jìn)度條被拉動(dòng)  
           progressChange(val){  
               this.player.currentTime(val);  
               this.playerCtrl.currentTimeInt=val;  
               this.playerCtrl.currentTime=timeUtil.secondToDate(val);  
           },

gets the value of the fixed point, and then jumps to the fixed point playback through the player's currentTime setting.

The volume adjustment method is similar to the playback progress:

一開始初始化的時(shí)候記得配置

[javascript] view plain copy
muted:false,//開始聲音

來開啟聲音，否則靜音狀態(tài)下調(diào)節(jié)聲音無效。

使用player.volume(val)這個(gè)api設(shè)置音量，其中val=0,表示聲音off,val=1表示聲音最大，0.5表示聲音設(shè)置在half。

四：總結(jié)

最后在app.vue/需要用到這個(gè)播放器的地方 引入自定義播放器組件即可。vue-video-player是大神基于video.js開發(fā)的適用于vue.js框架的組件，具有良好兼容性，所以我們?cè)趘ue中使用這個(gè)播放器組件本質(zhì)還是使用video.js，我們要更多的去了解video.js中的api并使用他。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

Bootstrap中使用WebUploader步驟詳解

Vue.js中computed使用詳解

The above is the detailed content of Detailed explanation of vue-video-player custom player steps. For more information, please follow other related articles on the PHP Chinese website!