西瓜播放器HTML5 視頻播放器
西瓜播放器是一個Web視頻播放器類庫,它本著一切都是組件化的原則設計了獨立可拆卸的 UI 組件。更重要的是它不只是在 UI 層有靈活的表現(xiàn),在功能上也做了大膽的嘗試:擺脫視頻加載、緩沖、格式支持對 video 的依賴。尤其是在 mp4 點播上做了較大的努力,讓本不支持流式播放的 mp4 能做到分段加載,這就意味著可以做到清晰度無縫切換、加載控制、節(jié)省視頻流量。同時,它也集成了對 flv、hls、dash 的點播和直播支持。文檔
起步
-
安裝
$ 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é)或者文檔。更多配置
插件
西瓜播放器提供了較多的插件,插件分兩類:一部分是自啟動的,一部分是繼承播放器核心類 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
