西瓜播放器是一個Web視頻播放器類庫，它本著一切都是組件化的原則設計了獨立可拆卸的 UI 組件。更重要的是它不只是在 UI 層有靈活的表現(xiàn)，在功能上也做了大膽的嘗試：擺脫視頻加載、緩沖、格式支持對 video 的依賴。尤其是在 mp4 點播上做了較大的努力，讓本不支持流式播放的 mp4 能做到分段加載，這就意味著可以做到清晰度無縫切換、加載控制、節(jié)省視頻流量。同時，它也集成了對 flv、hls、dash 的點播和直播支持。文檔

起步

1. 安裝

   $ npm install xgplayer

2. 使用

• Step 1:

  <div id="vs"></div>

• Step 2:

  import Player from 'xgplayer'
  
  let player = new Player({
      id: 'vs',
      url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4'
  })

  這是最簡單的播放器配置方法，基本功能可以跑起來，如果想使用高級功能參考插件一節(jié)或者文檔。更多配置

插件

西瓜播放器提供了較多的插件，插件分兩類：一部分是自啟動的，一部分是繼承播放器核心類 xgplayer 的。原則上官方提供插件都是自啟動的，封裝的第三方類庫都是繼承方式。有些功能插件本身能提供降級方案建議使用自啟動方式，否則建議使用繼承方式。播放器支持自定義插件，更多內容查看 插件

對于自啟動的插件使用方法如下：

import Player from 'xgplayer'
import 'xgplayer-mp4'

let player = new Player({
    id: 'video',
    url: '//abc.com/test.mp4'
})

xgplayer-mp4插件就是自啟動的，它會自己加載 mp4 視頻、解析 mp4 格式，實現(xiàn)自定義加載、緩沖、無縫切換等詳情。對于不支持 MSE 的設備自動降級。

Mobile Support

西瓜播放器支持移動端，不過安卓設備品牌和系統(tǒng)眾多，兼容性問題很多，播放器提供白名單機制保證在移動端完美的運行。白名單機制

Dev

為了方便開發(fā)者調試，我們提供了示例視頻資源。示例文件較大，可使用 git clone --recurse-submodules -j8 命令完整拉取源碼和示例文件；如果你只對源碼感興趣可以使用 git clone 命令僅拉取源碼部分。

$ git clone --recurse-submodules -j8 [email protected]:bytedance/xgplayer.git # 或者：git clone [email protected]:bytedance/xgplayer.git
$ cd xgplayer
$ npm install
$ npm run dev

訪問 http://localhost:9090/examples/index.html