Dieses Mal werde ich Ihnen die Schritte zum Anpassen des Vue-Video-Players ausführlich erl?utern. Was sind die Vorsichtsma?nahmen zum Anpassen des Vue-Video-Player-Players? Fall. Schauen wir uns das einmal an.

Abbildung 1 – Seitenleiste anzeigen

Abbildung 2 – Seitenleiste einklappen;

Bild 3: Vollbild.

Vorne schreiben

Sie müssen in diesem Projekt Vue und Vue-Video-Player verwenden Ich verwende das UI-Framework von iview, aber das UI-Framework spielt keine Rolle. Ich konzentriere mich hier auf die Verwendung des auf Video.js basierenden Vue-Video-Players und die Bedienung der API in Video.js.

Vue-Video-Player-Projektadresse: https://github.com/surmon-china/vue-video-player.

video.js-Dokumentadresse: http://docs.videojs.com/docs/api/player.html.

Projektverzeichnis:

1. ?u?eres UI-Layout

Abbildung 1 As Wie Sie sehen, verwendet dieses Projekt ein zweispaltiges adaptives Layout. Die rechte Seite ist die Wiedergabeliste mit einer festen Breite von 500 Pixeln. Das Wiedergabelistenfeld kann je nach Klick auf den Griff erweitert oder reduziert werden , und der Player Die Box passt auch ihre Breite entsprechend der Erweiterung/Verkleinerung der Playlist an.

(Da die aufgezeichnete Animation zu gro? zum Hochladen ist, k?nnen Sie mein Programm klonen und ausführen, um es anzuzeigen.)

Die HTML-Codestruktur ist wie folgt:

Fügen Sie beim Verkleinern und Erweitern eine überm??ige Animation hinzu. Hier entscheiden wir uns für die Verwendung handgeschriebener CSS-Animationen:

[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-Benutzeroberfl?che

Die gesamte benutzerdefinierte Player-Benutzeroberfl?che ist in einer Komponente gekapselt – CostomVedio.vue, und der Wiedergabebereich verwendet vue-video- Die untere Steuerleiste ist jedoch angepasst und verwendet nicht die mit dem Player gelieferte Steuerleiste. Normalerweise entsprechen diese h?ufig verwendeten Steuerleisten nicht den Anforderungen des Designers, daher müssen wir die Benutzeroberfl?che des Players anpassen.

HTML-Strukturcode lautet wie folgt:

[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. Implementieren Sie die benutzerdefinierte controlBar-Funktion

Der n?chste Schritt ist Implementieren Sie die benutzerdefinierten ControlBar-Funktionen wie Wiedergabe, Pause, n?chstes Lied, Wiedergabefortschritt, verbleibende Zeit, Vollbild, Lautst?rkeanpassung usw.

Hier müssen wir uns zun?chst die entsprechende API von video.js ansehen. Obwohl sie auf Englisch ist, ist sie sehr klar geschrieben und leicht zu verstehen.

Adresse des API-Dokuments von video.js: http://docs.videojs.com/docs/api/player.html

1. Wiedergabe, Pause, n?chstes Lied, Vollbild, haupts?chlich zur überwachung Wir fügen ein benutzerdefiniertes Schaltfl?chenklickereignis hinzu und rufen dann die Player-API auf, um den entsprechenden Vorgang auszuführen und den Status zu ?ndern.

[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);  
     }  
 },

Natürlich überwacht der Player im vue-video-player Zustands?nderungen in der Rückrufmethode:

[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>

Wir k?nnen unser Verhalten basierend auf diesen Zustands?nderungen in der Benutzeroberfl?che entsprechend ?ndern B. die Anzeige einer ?Pause“-Taste beim Abspielen, die Anzeige von ?Play“ und andere Funktionen beim Anhalten.

2. Wiedergabefortschritt, verbleibende Zeit, Lautst?rkeanpassung

Der Wiedergabefortschritt basiert auf der Methode currentTime in der Rückrufmethode onPlayerTimeupdate(), Einheit S Ich verwende hier den Schieberegler und der Fortschritt wird anhand von Ganzzahlen berechnet. Daher muss ich hier zwei Variablen speichern, eine in Ganzzahlform und die andere in Zeichenfolgenform nach der Formatierung von Stunden, Minuten und Sekunden für die Anzeige.

[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());  
           },

Festpunktwiedergabe, das hei?t, der Benutzer klickt irgendwo auf den Fortschrittsbalken, um die Wiedergabe an diesem Punkt fortzusetzen. Der Schieberegler wird verwendet
[html], um eine einfache Kopie anzuzeigen
@on- change=" progressChange"

Diese Methode überwacht den Festpunkt des Schiebereglers,

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

ruft den Wert des Festpunkts ab und springt dann über die aktuelle Zeiteinstellung des Players zur Festpunktwiedergabe.
Die Methode zur Lautst?rkeanpassung ?hnelt dem Wiedergabefortschritt:

一開始初始化的時(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框架的組件，具有良好兼容性，所以我們在vue中使用這個(gè)播放器組件本質(zhì)還是使用video.js，我們要更多的去了解video.js中的api并使用他。

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

推薦閱讀：

Bootstrap中使用WebUploader步驟詳解

Vue.js中computed使用詳解

Das obige ist der detaillierte Inhalt vonDetaillierte Erl?uterung der benutzerdefinierten Player-Schritte für den Vue-Video-Player. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!