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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | [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
.player-box{
margin-right: 540px;
height: 100%;
position: relative;
}
[css] view plain copy
.info-box{
width: 520px;
height: 100%;
background: transparent;
position: relative;
overflow: hidden;
}
[css] view plain copy
.content{
background: #292929;
position: relative;
padding: 20px 0 20px 20px;
}
|
Nach dem Login kopieren
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | [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>
<!-- 底部进度条 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>
具体思路就是,使用播放器铺满播放区,使用position定位将自定义的controlBar固定在播放区的底部,这里注意controlBar的z-index一定要足够大,否则在全屏的时候不在最上层看不到。
css样式:
[css] view plain copy
<style>
.video-player-box{
height: 100% !important;
width: 100% !important;
}
.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>
|
Nach dem Login kopieren
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | [javascript] view plain copy
play(){
this.player.play();
},
pause(){
this.player.pause();
},
nextClick(){
console.log( "自定义" , "下一曲点击" );
},
fullScreenHandle(){
console.log( "全屏" );
if (!this.player.isFullscreen()){
this.player.requestFullscreen();
this.player.isFullscreen(true);
} else {
this.player.exitFullscreen();
this.player.isFullscreen(false);
}
},
|
Nach dem Login kopieren
Natürlich überwacht der Player im vue-video-player Zustandsänderungen in der Rückrufmethode:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | [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>
|
Nach dem Login kopieren
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.
1 2 3 4 5 6 7 | [javascript] view plain copy
onPlayerTimeupdate(player){
this.playerCtrl.currentTime=timeUtil.secondToDate(player.currentTime());
this.playerCtrl.currentTimeInt=Math. floor (player.currentTime());
console.log( "当前音量" ,player.volume());
},
|
Nach dem Login kopieren
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,
1 2 3 4 5 6 7 | [javascript] view plain copy
progressChange(val){
this.player.currentTime(val);
this.playerCtrl.currentTimeInt=val;
this.playerCtrl.currentTime=timeUtil.secondToDate(val);
},
|
Nach dem Login kopieren
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:
一开始初始化的时候记得配置
1 2 | [javascript] view plain copy
muted:false,
|
Nach dem Login kopieren
来开启声音,否则静音状态下调节声音无效。
使用player.volume(val)这个api设置音量,其中val=0,表示声音off,val=1表示声音最大,0.5表示声音设置在half。
四:总结
最后在app.vue/需要用到这个播放器的地方 引入自定义播放器组件即可。vue-video-player是大神基于video.js开发的适用于vue.js框架的组件,具有良好兼容性,所以我们在vue中使用这个播放器组件本质还是使用video.js,我们要更多的去了解video.js中的api并使用他。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
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!