Vue-CoreVideoPlayer 一款基於 vue.js 的輕量級、優秀的影片播放器元件

語言: CN / TW / HK

「這是我參與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屬性配置的對接,可以看到大師兄在這裡使用了autoplayloop屬性,其他屬性也是一樣的使用方式哦~

這樣一個簡單的播放器就已經整合完啦~

4.基本配置

設定影片源,這裡Sample大師兄使用了多解析度作為效果展示。

```

```

如果是使用一個影片檔案的相對地址或者你的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上開源,同時大師兄已經將Sample的程式碼上傳到Github,大家在公眾號後臺回覆播放器即可獲取相關的學習資源哦~

進了前端門,便是一家人

原創不易,點贊、留言、分享就是大師兄寫下去的動力!