videos player.php_基于vue-video-player自定义播放器的方法
這篇文章主要介紹了基于vue-video-player自定義播放器的方法，主要是基于video.js開發的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以參考下
先看一下效果。
圖1--顯示側邊欄
圖2-收起側邊欄；
圖三：全屏。
寫在前面
本次項目中需要用到vue，vue-video-player，我用的是iview的ui框架，但是ui框架無妨，這里關注的是基于video.js開發的vue-video-player的使用，以及如何操作video.js中的api。
vue-video-player 項目地址：https://github.com/surmon-china/vue-video-player。
video.js文檔地址：http://docs.videojs.com/docs/api/player.html。
項目目錄：
一、外層ui布局
圖一中可以看到，本次項目使用的是兩欄自適應布局，其中，右側為播放列表，固定寬度500px，左邊是播放器box，播放列表box可根據手柄點擊展開或收起，而播放器box也跟隨播放列表的展開/收縮進行寬度自適應。
(因錄制動畫太大傳不上，可clone我的程序下來運行可見)。
html代碼結構如此：
收縮展開的時候加上一個過度動畫，這里選擇使用css手寫動畫：.transition{
transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
}.toLeft{
.transition;
margin-right: 540px !important;
}
.toRight{
.transition;
margin-right: 40px !important;
}
.toHide{
.transition;
right: -500px !important;
}
.toShow{
.transition;
right: 0px !important;
}// 播放區
.player-box{
margin-right: 540px;
height: 100%;
position: relative;
}//側邊信息區
.info-box{
width: 520px;
height: 100%;
background: transparent;
position: relative;
overflow: hidden;
｝// 內容區
.content{
background: #292929;
position: relative;
padding: 20px 0 20px 20px;
}
二、播放器ui
整個自定義的播放器ui封裝成了一個組件--CostomVedio.vue，播放區使用的是vue-video-player的播放器，但是底部控制欄是自定義的，不使用播放器自帶的controlBar，通常通用的這些都不符合設計哥哥的要求，所以我們需要自定義播放器UI。
html結構代碼如下：
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"
>
{{playerCtrl.currentTime}}/{{playerCtrl.duration}}
具體思路就是，使用播放器鋪滿播放區，使用position定位將自定義的controlBar固定在播放區的底部，這里注意controlBar的z-index一定要足夠大，否則在全屏的時候不在最上層看不到。
css樣式：
.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;
}
三、實現自定義controlBar功能
接下來就是實現自定義controlBar的功能，如播放，暫停，下一曲，播放進度，剩余時間，全屏，音量調節等。
這里我們肯定要先看video.js的相應api了，雖然是英文的但是上邊寫的很清楚，很容易看明白。
video.js api文檔地址：http://docs.videojs.com/docs/api/player.html
1. 播放，暫停，下一曲，全屏主要就是監聽我們添加的自定義按鈕click事件，然后調用播放器API執行相應操作，并改變狀態。// 播放
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);
}
},
當然，在vue-video-player中的播放器會在回調方法中監聽狀態的變化：
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"
>
我們可以根據這些狀態變化，相應的改變我們的UI，比如播放時顯示“暫停”按鈕，暫停時顯示“播放”等功能。
2.播放進度，剩余時間，音量調節
播放進度的話是根據在播放器onPlayerTimeupdate()回調方法中，通過currentTime這個方法來獲取當前播放的進度時間，單位S，因為這里我使用的是slider，進度都是整數計算，所以這里我需要兩個變量存放，一個是整數形式，另一個是格式化好時分秒之后的string形式，用以顯示。//時間更新
onPlayerTimeupdate(player){
this.playerCtrl.currentTime=timeUtil.secondToDate(player.currentTime());
this.playerCtrl.currentTimeInt=Math.floor(player.currentTime());
console.log("當前音量",player.volume());
},
定點播放，即用戶點擊進度條某個地方，即可在這個點進度播放，使用的是slider的@on-change="progressChange"
這個方法監聽slider定點，//進度條被拉動
progressChange(val){
this.player.currentTime(val);
this.playerCtrl.currentTimeInt=val;
this.playerCtrl.currentTime=timeUtil.secondToDate(val);
},
拿到定點的值，然后通過player的currentTime設置跳到定點播放。
音量調節的做法跟播放進度相似：
一開始初始化的時候記得配置muted:false,//開始聲音
來開啟聲音，否則靜音狀態下調節聲音無效。
使用player.volume(val)這個api設置音量，其中val=0,表示聲音off,val=1表示聲音最大，0.5表示聲音設置在half。
上面是我整理給大家的，希望今后會對大家有幫助。
相關文章：
總結
以上是生活随笔為你收集整理的videos player.php_基于vue-video-player自定义播放器的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： APU工业控制领域应用
- 下一篇： NSIS 安装打包安装程序