今天來介紹西瓜播放器 (又稱 xgplayer )

西瓜播放器 是由中國西瓜視頻所開發維護的播放器。

xgplayer 播放器的特色有：

  1. Github 1005 顆星星
  2. 可支援多種格式、協議影片 ( MP4、HLS、WEBM、DASH..etc )
  3. 主張播放器萬物皆組件(Plugins) 可自由使用、擴增功能
  4. 文件齊全詳細(中文)
  5. 有官方自己推出的 React 、 Vue 版本可使用

安裝、引入 西瓜播放器

CDN

<script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.3/browser/index.js" type="text/javascript"></script>

NPM

npm install xgplayer

快速入門：建立 西瓜播放器

HTML

<div id="video"></div>

JS

let player = new Player({
  id: 'video',
  url: 'http://www.html5videoplayer.net/videos/toystory.mp4'
});

至此便建立好西瓜播放器

建立播放器的配置與說明見此

事件 Events

西瓜播放器的事件監聽很簡單，和前幾天介紹的播放器差不多，都是

播放器物件.on(事件名, 之後執行的回呼函式)

例如

player.on("pause", ()=>{
  console.log("暫停")
})

事件名與其他參數說明見此

方法 Methods API

這裡列出幾個常見方法

方法 描述
.play( ) 播放
.pause( ) 暫停
.reload( ) 重新加載影片
.replay( ) 播放器重播
.destroy( ) 銷毀播放器物件

其他 Methods 方法說明見此

參考

西瓜播放器 官方github
西瓜播放器 官方文件