muxinc/media-chrome

これは何？

主な機能

• 01ネイティブカスタム要素をベースにしているため、特定のフレームワークに依存せずに動作します。
• 02標準の video・audio 要素や、複数のサードパーティ製プレイヤーで使えます。
• 03通常の HTML タグでコントロールを追加・削除できます。
• 04通常の CSS でスタイルを設定できます。
• 05主要な要素向けの React ラッパーコンポーネントを提供します。

ユースケース

• Web サイトのデザインに合わせてスタイルをカスタマイズした動画プレイヤーを構築する。
• 複数のプレイヤーライブラリを使うサイト間で、一貫した再生コントロールを追加する。
• Web アプリに、再生・シーク・再生速度のコントロールを備えた音声プレイヤーを作成する。

クイックスタート

1. 1

   HTMLページでmodule scriptタグを使い、jsDelivr CDNからMedia Chromeを読み込みます

2. 2

   videoまたはaudio要素をmedia-controllerで囲み、コントロール要素を含むmedia-control-barを追加します

使う前に知っておきたいこと

• !READMEでは新規プロジェクトにVideo.jsを推奨しており、Media ChromeはVideo.jsと並行してメンテナンスされています。

収録されている特集

トピック

よくある質問

media-chrome とは？

あらゆる JavaScript フレームワークで使える、カスタマイズ可能なネイティブ Web コンポーネント製の音声・動画プレイヤーコントロール。 Media Chrome は、再生ボタン、音量や再生位置の調整、フルスクリーンやピクチャーインピクチャーの切り替えなど、メディアプレイヤーのコントロールを構築するためのネイティブカスタム要素のセットです。コントロールは通常の HTML タグなので、マークアップを編集するだけで追加・削除でき、スタイルは通常の CSS で設定できます。

media-chrome は無料で使えますか？ライセンスは？

media-chrome は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

media-chrome は今もメンテナンスされていますか？

活発にメンテナンス中。media-chrome の最終コミットは 2026年10月23日 です。

media-chrome は何に使えますか？

Web サイトのデザインに合わせてスタイルをカスタマイズした動画プレイヤーを構築する。 複数のプレイヤーライブラリを使うサイト間で、一貫した再生コントロールを追加する。 Web アプリに、再生・シーク・再生速度のコントロールを備えた音声プレイヤーを作成する。

media-chrome のインストール方法は？

HTMLページでmodule scriptタグを使い、jsDelivr CDNからMedia Chromeを読み込みます videoまたはaudio要素をmedia-controllerで囲み、コントロール要素を含むmedia-control-barを追加します

media-chrome はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/muxinc/media-chrome