ホームJavaScriptbytedance/xgplayer
// archived 2026-04-24
bytedance

xgplayer

Frontend#JavaScript#Video Player#HTML5#Web Development
GitHub で見る →
9,161

// 概要

xgplayer は、柔軟な UI カスタマイズを実現するために完全にコンポーネント化されたアーキテクチャを採用した Web ビデオプレイヤーライブラリです。ストリーミング非対応の MP4 ファイル向けに段階的な読み込み機能を提供し、ネイティブのビデオ読み込みやバッファリングへの依存を排除します。また、FLV、HLS、DASH を含むオンデマンドおよびライブストリーミング形式を包括的にサポートしています。

// 技術解説

xgplayer は、UI とコアの再生ロジックを分離した、高度にモジュール化されたコンポーネントベースのアーキテクチャで構築された Web ビデオプレイヤーライブラリです。プレイヤーを標準的なブラウザのビデオ依存関係から切り離すことで、特にストリーミング非対応の MP4 ファイルに関連する読み込み、バッファリング、フォーマットサポートといった重要な問題を解決します。この設計により、段階的な読み込みやシームレスな画質切り替えといった高度な機能が可能となり、オンデマンドおよびライブビデオストリーミングの両方において、開発者に柔軟で堅牢なソリューションを提供します。

// 主要ハイライト

01
UI 要素を分離可能な完全コンポーネント化アーキテクチャを実装し、最大限のカスタマイズを実現します。
02
MP4 ファイル向けの段階的な読み込みを提供し、本来ストリーミングをサポートしていないフォーマットでもストリーミングに近いパフォーマンスを可能にします。
03
FLV、HLS、DASH を含む幅広いフォーマットをサポートし、オンデマンドおよびライブビデオ再生の両方に対応します。
04
プラグインベースのシステムを提供し、開発者が設定を通じて機能を簡単に拡張したり、組み込み機能を無効化したりできます。
05
シームレスな画質切り替えと詳細な読み込み制御を可能にし、帯域幅とユーザーエクスペリエンスを最適化します。

// ユースケース

01
ストリーミング非対応 MP4 ファイル向けの段階的な読み込み
02
FLV、HLS、DASH ストリーミングのサポート
03
高度にモジュール化された分離可能な UI コンポーネントシステム

// クイックスタート

xgplayer を使い始めるには、npm を使用して 'npm install xgplayer' でパッケージをインストールします。インストール後、HTML にコンテナ要素を作成し、JavaScript で Player クラスをインポートして、ターゲット要素の ID とビデオ URL を指定することでプレイヤーを初期化します。