這次帶給大家使用iview的ui框架自訂播放器，使用iview的ui框架自訂播放器注意事項有哪些，下面就是實戰案例，一起來看一下。
圖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手寫動畫：
view plain copy
.transition{
transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
}
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;
}
view plain copy
// 播放区
.player-box{
margin-right: 540px;
height: 100%;
position: relative;
}
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;
}
二、播放器ui
整個自訂的播放器ui封裝變成了一個元件--CostomVedio.vue，播放區使用的是vue-video- player的播放器，但底部控制列是自訂的，不使用播放器自帶的controlBar，通常通用的這些都不符合設計哥哥的要求，所以我們需要自訂播放器UI。
html結構程式碼如下：
view plain copy
<template>
<p>
<video-player>
<!-- @canplay="onPlayerCanplay($event)" -->
<!-- @canplaythrough="onPlayerCanplaythrough($event)" -->
</video-player>
<!-- 底部进度条 start -->
<transition>
<p>
<!-- -->
<!-- <p class="bottomCtrl" v-show="false"> -->
<!-- <p class="bottomCtrl" > -->
<slider></slider>
</p>
<p>
</p>
<p>
<!-- 暂停 -->
<span>
<icon></icon>
</span>
<!-- 播放 -->
<span>
<icon></icon>
</span>
<!-- 下一曲 -->
<span>
<icon></icon>
</span>
<span>
{{playerCtrl.currentTime}}/{{playerCtrl.duration}}
</span>
</p>
<p>
</p>
<p>
<!-- 音量 -->
<icon></icon>
<slider></slider>
</p>
<!-- 全屏 -->
<span>
<icon></icon>
</span>
</transition></p>
</template>
具體想法就是，使用播放器鋪滿播放區，使用position定位將自訂的controlBar固定在播放區的底部，這裡要注意controlBar的z-index一定要夠大，否則在全螢幕的時候不在最上層看不到。
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>
三、實作自訂controlBar功能
接下來就是實作自訂controlBar的功能，如播放，暫停，下一曲，播放進度，剩餘時間，全屏，音量調節等。
這裡我們一定要先看video.js的對應api了，雖然是英文的但是上邊寫的很清楚，很容易看懂。
video.js api文檔位址：http://docs.videojs.com/docs/api/player.html
1. 播放，暫停，下一曲，全螢幕主要就是監聽我們新增的自訂按鈕click事件，然後呼叫播放器API執行對應操作，並改變狀態。
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);
}
},
當然，在vue-video-player中的播放器會在回呼方法中監聽狀態的變化：
view plain copy <video-player> <!-- @canplay="onPlayerCanplay($event)" --> <!-- @canplaythrough="onPlayerCanplaythrough($event)" --> </video-player>
我們可以根據這些狀態變化，對應的改變我們的UI，例如播放時顯示「暫停」按鈕，暫停時顯示「播放」等功能。
2.播放進度，剩餘時間，音量調整
播放進度的話是根據在播放器onPlayerTimeupdate()回調方法中，透過currentTime這個方法來取得目前播放的進度時間，單位S，因為這裡我使用的是slider，進度都是整數計算，所以這裡我需要兩個變數存放，一個是整數形式，另一個是格式化好時分秒之後的string形式，用以顯示。
view plain copy
//时间更新
onPlayerTimeupdate(player){
this.playerCtrl.currentTime=timeUtil.secondToDate(player.currentTime());
this.playerCtrl.currentTimeInt=Math.floor(player.currentTime());
console.log("当前音量",player.volume());
},
定點播放，即使用者點擊進度條某個地方，即可在這個點進度播放，使用的是slider的
view plain copy @on-change="progressChange"
這個方法監聽slider定點，
view plain copy
//进度条被拉动
progressChange(val){
this.player.currentTime(val);
this.playerCtrl.currentTimeInt=val;
this.playerCtrl.currentTime=timeUtil.secondToDate(val);
},
拿到定点的值，然后通过player的currentTime设置跳到定点播放。
音量调节的做法跟播放进度相似：
一开始初始化的时候记得配置
view plain copy muted:false,//开始声音
来开启声音，否则静音状态下调节声音无效。
使用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中文网其它相关文章！
推荐阅读：
以上是使用iview的ui框架自訂播放器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AMJavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。
使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。 首先，什麼是多租戶SaaS應用程序？ 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務
如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫
JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AMJavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。
JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AMJavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AMJavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
Python還是JavaScript更好？Apr 06, 2025 am 12:14 AMPython更适合数据科学和机器学习，JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称，适用于数据分析和Web开发。2.JavaScript是前端开发核心，Node.js支持服务器端编程，适用于全栈开发。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
WebStorm Mac版
好用的JavaScript開發工具
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
Dreamweaver Mac版
視覺化網頁開發工具
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
