西瓜播放器HTML5 視頻播放器
西瓜播放器是一個(gè)Web視頻播放器類(lèi)庫(kù)，它本著一切都是組件化的原則設(shè)計(jì)了獨(dú)立可拆卸的 UI 組件。更重要的是它不只是在 UI 層有靈活的表現(xiàn)，在功能上也做了大膽的嘗試：擺脫視頻加載、緩沖、格式支持對(duì) video 的依賴(lài)。尤其是在 mp4 點(diǎn)播上做了較大的努力，讓本不支持流式播放的 mp4 能做到分段加載，這就意味著可以做到清晰度無(wú)縫切換、加載控制、節(jié)省視頻流量。同時(shí)，它也集成了對(duì) flv、hls、dash 的點(diǎn)播和直播支持。文檔
起步
-
安裝
$ npm install xgplayer
-
使用
-
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ǎn)單的播放器配置方法，基本功能可以跑起來(lái)，如果想使用高級(jí)功能參考插件一節(jié)或者文檔。更多配置
插件
西瓜播放器提供了較多的插件，插件分兩類(lèi)：一部分是自啟動(dòng)的，一部分是繼承播放器核心類(lèi) xgplayer 的。原則上官方提供插件都是自啟動(dòng)的，封裝的第三方類(lèi)庫(kù)都是繼承方式。有些功能插件本身能提供降級(jí)方案建議使用自啟動(dòng)方式，否則建議使用繼承方式。播放器支持自定義插件，更多內(nèi)容查看 插件
對(duì)于自啟動(dòng)的插件使用方法如下：
import Player from 'xgplayer'
import 'xgplayer-mp4'
let player = new Player({
id: 'video',
url: '//abc.com/test.mp4'
})
xgplayer-mp4插件就是自啟動(dòng)的，它會(huì)自己加載 mp4 視頻、解析 mp4 格式，實(shí)現(xiàn)自定義加載、緩沖、無(wú)縫切換等詳情。對(duì)于不支持 MSE 的設(shè)備自動(dòng)降級(jí)。
Mobile Support
西瓜播放器支持移動(dòng)端，不過(guò)安卓設(shè)備品牌和系統(tǒng)眾多，兼容性問(wèn)題很多，播放器提供白名單機(jī)制保證在移動(dòng)端完美的運(yùn)行。白名單機(jī)制
Dev
為了方便開(kāi)發(fā)者調(diào)試，我們提供了示例視頻資源。示例文件較大，可使用 git clone --recurse-submodules -j8 命令完整拉取源碼和示例文件；如果你只對(duì)源碼感興趣可以使用 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
訪(fǎng)問(wèn) http://localhost:9090/examples/index.html