大家好，我是前端實驗室的大師兄!
今天大師兄給大家推薦一款非常優(yōu)秀的視頻播放組件
效果欣賞
介紹
Vue-CoreVideoPlayer一款基于vue.js的輕量級的視頻播放器插件背桐。</br>
采用Adobd XD進行UI設計签孔，支持移動端適配,不僅功能強大绪囱，顏值也是超一流！
Vue-CoreVideoPlayer的說明文檔和sample都很完善绪抛，上手十分容易。
該組件也保持了和原生HTML Video屬性配置的對接电禀，可定制性很高幢码。
播放器的UI設計基于Adobe XD，官方也提供了基于Adobe XD的UI設計源文件尖飞，可供開發(fā)者和設計師們二次創(chuàng)作自定義播放器UI症副。
特性
- 支持個性化配置，可定制播放器主題界面
- 支持i18n（國際化）葫松，默認支持中文瓦糕、英文和日文
- 支持服務端渲染
- 支持畫中畫模式
- 支持事件訂閱
- 優(yōu)秀的API設計，易于開發(fā)
- 移動端適配
- 提供
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屬性亥揖，其他屬性也是一樣的使用方式哦~
這樣一個簡單的播放器就已經(jīng)集成完啦~
4.基本配置
設置視頻源珊擂，這里Sample大師兄使用了多分辨率作為效果展示。
<script>
export default {
name: 'app',
data() {
return {
videoSource: [{
src: 'https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4',
resolution: 360,
}, {
src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
resolution: 720,
}, {
src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4',
resolution: 1080
}],
cover : "https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png",
title : "你的名字"
}
}
}
</script>
如果是使用一個視頻文件的相對地址或者你的CDN地址方式：
<vue-core-video-player src="https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4"/>
5.事件訂閱
VueCoreVideoPlayer遵循W3C標準的媒體事件API,你可以前往MDN獲取這些細節(jié)费变，下面羅列一些非常常用的事件：
- play 表示當播放器開始播放或者通過 play() 方法從暫停狀態(tài)恢復摧扇。
- pause 當播放器停止播放的時候觸發(fā)。
- progress 當播放器正在下載媒體資源挚歧。
- loadeddata 當播放器開始加載第一幀時候觸發(fā)扛稽。
- canplay 當加載足夠數(shù)據(jù)可以滿足基本播放后觸發(fā).。
- durationchange 當媒體獲取一定數(shù)據(jù)滑负，并且完整的解析出 metadata 信息在张。
- ended 當媒體播放結(jié)束時候觸發(fā)。
- timeupdate 當播放的媒體 currenttime 發(fā)生改變時候觸發(fā)矮慕。
- seeked 當用戶 seek 操作完成觸發(fā)帮匾。
methods: {
paly() {
console.log("play");
},
pause(){
console.log("pause");
}
}
作為一款優(yōu)秀的現(xiàn)代視頻播放組件，別忘了VueCoreVideoPlayer還支持i18n（國際化）痴鳄，默認支持中文瘟斜、英文和日文；同時還提供了一款HLS解碼插件playcore-hls支持HLS的播放痪寻，更多的功能及使用大家自己可以去實踐一下螺句！
VueCoreVideoPlayer已經(jīng)在Github上開源，同時大師兄已經(jīng)將Sample的代碼上傳到Github,大家在回復播放器即可獲取相關(guān)的學習資源哦~
進了前端門橡类，便是一家人
原創(chuàng)不易,點贊蛇尚、留言、分享就是大師兄寫下去的動力!
