Vue-CoreVideoPlayer 一款基於 vue.js 的輕量級、優秀的影片播放器元件
「這是我參與11月更文挑戰的第6天,活動詳情檢視:2021最後一次更文挑戰」
大家好,我是前端實驗室
的大師兄!
今天大師兄給大家推薦一款非常優秀的影片播放元件
效果欣賞
介紹
Vue-CoreVideoPlayer
一款基於vue.js
的輕量級的影片播放器外掛。\ 採用Adobd XD
進行UI設計,支援移動端適配,不僅功能強大,顏值也是超一流!
Vue-CoreVideoPlayer
的說明文件
和sample
都很完善,上手十分容易。
該元件也保持了和原生HTML Video
屬性配置的對接,可定製性很高。
播放器的UI設計基於Adobe XD
,官方也提供了基於Adobe XD
的UI設計原始檔,可供開發者和設計師們二次創作自定義播放器UI。
特性
- 支援個性化配置,可定製播放器主題介面
- 支援i18n(國際化),預設支援中文、英文和日文
- 支援服務端渲染
- 支援畫中畫模式
- 支援事件訂閱
- 優秀的API設計,易於開發
- 移動端適配
- 提供
playcore-hls
解碼外掛,支援HLS直播流格式播放
快速上手
1.下載依賴
使用NPM
$ npm install --save vue-core-video-player
使用yarn
$ yarn add -S vue-core-video-player
直接引入
<script src="./dist/vue-core-vide-player.umd.min.js"></script>
2.引入模組
編輯 main.js 然後引入模組
``` import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.use(VueCoreVideoPlayer) ```
3.播放元件使用
<div id="app">
<div class="player-container">
<vue-core-video-player :src="videoSource" :cover="cover" :title= "title" autoplay loop="true"/>
</div>
</div>
上面我們說到VueCoreVideoPlayer
元件保持了和原生HTML Video
屬性配置的對接,可以看到大師兄在這裡使用了autoplay
和loop
屬性,其他屬性也是一樣的使用方式哦~
這樣一個簡單的播放器就已經整合完啦~
4.基本配置
設定影片源,這裡Sample
大師兄使用了多解析度作為效果展示。
```
```
如果是使用一個影片檔案的相對地址或者你的CDN地址方式:
<vue-core-video-player src="http://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4"/>
5.事件訂閱
VueCoreVideoPlayer
遵循W3C
標準的媒體事件API
,你可以前往MDN
獲取這些細節,下面羅列一些非常常用的事件:
- play 表示當播放器開始播放或者通過 play() 方法從暫停狀態恢復。
- pause 當播放器停止播放的時候觸發。
- progress 當播放器正在下載媒體資源。
- loadeddata 當播放器開始載入第一幀時候觸發。
- canplay 當載入足夠資料可以滿足基本播放後觸發.。
- durationchange 當媒體獲取一定資料,並且完整的解析出 metadata 資訊。
- ended 當媒體播放結束時候觸發。
- timeupdate 當播放的媒體 currenttime 發生改變時候觸發。
- seeked 當用戶 seek 操作完成觸發。
methods: {
paly() {
console.log("play");
},
pause(){
console.log("pause");
}
}
作為一款優秀的現代影片播放元件,別忘了VueCoreVideoPlayer
還支援i18n(國際化),預設支援中文、英文和日文;同時還提供了一款HLS
解碼外掛playcore-hls
支援HLS的播放,更多的功能及使用大家自己可以去實踐一下!
VueCoreVideoPlayer
已經在Github
上開源,同時大師兄已經將Sample
的程式碼上傳到Github
,大家在公眾號後臺回覆播放器
即可獲取相關的學習資源哦~
進了前端門,便是一家人
原創不易,點贊、留言、分享就是大師兄寫下去的動力!