xgplayer.js 西瓜播放器 - 字節跳動團隊出品的免費開源 HTML5 視頻播放組件,內置解析器、也能節省流量

語言: CN / TW / HK

一個功能強大,符合國內視頻播放業務的 web 視頻播放組件,由西瓜視頻技術團隊官方出品。

關於西瓜播放器

西瓜播放器 (xgplayer.js) 不是一個看片軟件,而是一個Web 開發上的視頻播放器類庫,也是一個獨立的 UI 組件,用來實現在網頁上播放視頻的功能。不僅在 UI 層有靈活的表現,同時也集成了對 flv、hls、dash 的點播和直播支持,尤其是在 mp4 點播上很便捷,讓本來不支持流播放的 mp4 格式視頻能夠分段加載,無須轉換格式實現清晰度無縫切換、加載控制、節省視頻流量的需求,節省服務器開銷。

xgplayer.js 官網

字節跳動的視頻業務大多數是短視頻,早期的時候開發團隊在 video.js 基礎上做二次開發。後來發現很多功能達不到要求,比如自定義 UI 、視頻的清晰度無縫切換、視頻流量開銷大等,決定自己從底層開發一款符合業務要求的 web 播放器,在 2018 年初推出了穩定版本,發展至今,功能強大,性能出色,擁有完善的視頻播放 API,不僅支撐了西瓜視頻、抖音、頭條等 web 視頻業務,也被國內多家大廠超過200個產品用來支持視頻業務,是一款優秀的HTML5 視頻播放器。

技術特性

  • 從底層解析 MP4、HLS、FLV 格式的視頻,有更廣的視頻播放使用場景

  • 靈活的插件體系,PC / 移動端自動切換安全的白名單機制

  • 強大的 MP4 視頻播放控制,點播無縫切換,帶寬節省顯著

  • 擁有完整的產品機制,錯誤的監控上報和自動的降級處理

開發上手體驗和使用建議

xgplayer.js的安裝使用很簡單,支持 npm 安裝和 cdn 引入 js 兩種方式,使用也很簡單,只需要提供佔位 DOM,即可實例化,官網提供了全面易懂的開發文檔和代碼例子。

xgplayer.js 開發文檔

xgplayer.js 對 web 視頻播放功能支持很全面,連 ios 投屏微信同層播放 、微信 全屏播放 等視頻開發中比較難解決的功能,都可以簡單配置實現,官方還提供了各種視頻播放相關的插件,目測遇到的視頻相關開發需求,幾乎都能幫我們解決。

對於可能只會用到很小一部分功能,xgplayer.js 提供了簡易版本和只引入播放內核兩種方式,能夠大大減少打包體積。

為了提高開發效率和開發體驗,官網還提供了可視化的代碼生成器。

在線生成代碼

音頻播放支持

xgplayer.js 還可以用來播放音頻,簡單配置就可以做出一個帶可視化波形、歌詞同步的音樂播放器。

xgplayer.js 音頻播放

瀏覽器兼容

在兼容性方面,xgplayer.js 支持直接播放 MP4 視頻:

  • PC 端播放HLS、FLV、MPEG-DASH需要瀏覽器支持 Media Source Extensions

  • iOS 支持直接播放 mp4 和 HLS

  • 安卓支持直接播放 mp4 和 HLS,播放FLV、MPEG-DASH 需要瀏覽器支持 Media Source Extensions

免費開源説明

西瓜播放器 (xgplayer.js) 是字節跳動開發團隊出品的免費開源 HTML5 音視頻播放組件,基於MIT 開源協議,任何個人和公司都可以免費用於自己的項目,唯一的要求就是默認授權將使用西瓜播放器所在業務的 Logo 放置在官網展示。

↓↓點【閲讀原文】獲取xgplayer.js 西瓜播放器官網地址。