大家好,我是程序視點的小二哥!今天小二哥給大家推薦一款非常優秀的視頻播放組件
效果欣賞
介紹
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
小二哥使用了多分辨率作為效果展示。
<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
獲取這些細節,下面羅列一些非常常用的事件:
- 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
上開源,大家可以自行獲取相關的學習資源哦~
https://core-player.github.io/vue-core-video-player/zh/
如果你用VUE做開發,那就趕緊試試吧!如文章對你有所幫助,別忘了點贊、留言、分享哦!