videojs-ui

Video.js プレーヤー UI の作成

プレーヤー UI は一般的なインターフェース作業ですが、特殊な条件があります。変化し続ける映像の上に重なり、操作がないときは非表示になり、キーボード、マウス、タッチのすべてで操作され、毎秒何度も変化する状態を報告します。以下のルールに合わせて調整すれば、一般的なインターフェースのアドバイスが当てはまります。

スキンプロジェクト全体については、videojs-skin スキルでセットアップ、ワークベンチ、公開方法を確認できます。プレーヤーをインストールまたは設定するには、videojs スキルを使用してください。

ドキュメントを探す

node_modules/@videojs/<react|html>/docs/llms.txt に含まれるドキュメント、または https://videojs.org/docs/framework/<react|html>/llms.txt を確認してください。ページの URL には .md を追加します。タイトルから探す場合：

必要な内容	参照先
コントロールが状態、props、レンダリングのカスタマイズをどのように公開するか	UI コンポーネント
ライブラリが提供していないコントロール	独自の UI コンポーネントを作成する
コンポーネントの各部、data-* 状態、CSS プロパティ、キー	そのコンポーネントのリファレンスページ
コンポーネントがアクセシビリティのためにすでに対応している内容	アクセシビリティ
ショートカット、ジェスチャー、翻訳済みラベル	キーボードショートカット、国際化

ワークフロー

1. スタイリングの前に、何を作るのかを把握します。参考資料やデザイン仕様がある場合は、それに沿って作成し、資料に示されていないものやユーザーが依頼していないものは追加しません。参考資料がない場合は、意図する見た目を数行で説明し、複数のコントロールを作り始める前に確認を取ります。
2. Video.js コンポーネントを使うか、そのコンポーネントを通じて要素をレンダリングし、役割、翻訳済みラベル、状態属性、キーボードサポートを維持します。ライブラリにないものだけを一から作成し、「独自の UI コンポーネントを作成する」に従ってください。
3. 作成中は以下のルールを適用します。
4. インストール済みの場合、またはユーザーが追加に同意した場合は、references/companions.md の関連スキルを使って仕上げます。
5. 引き渡す前に、references/review.md に従ってレビューします。

動画上の UI に関するルール

• ページの背景ではなく、映像に対するコントラストを確保します。 明るいフレーム、暗いフレーム、情報量の多いフレームの上で、テキストやアイコンを確認します。スクリーン、グラデーション、半透明の面、シャドウを使ってコントロールを映像から分離します。細い境界線だけでは見えなくなります。
• 数字の表示を安定させます。 時刻表示には常に font-variant-numeric: tabular-nums（Tailwind の tabular-nums）を使用します。再生中に変化する再生速度やカウントにも適用し、各桁の幅を揃えてレイアウトがずれないようにします。長時間のメディアでは時間表示用の余白を確保し、ライブ配信のラベルにも対応します。
• アイコンは一つのセットを使い、実際の表示サイズで描画します。 ユーザー自身のデザインファイルがある場合は、そこから書き出したアイコンを使用します。他者のプレーヤーに合わせる場合は、アイコンをコピーせず、見た目が同一になるように描き直します。それ以外の場合は、既存のセットを使うか、グリッド、線幅、角の丸み、スタイルを統一した新しいセットを用意します。セットを混在させてはいけません。アイコンを追加または変更する前に、references/icons.md を確認してください。
• アイコンの状態は同じ位置で切り替えます。 再生と一時停止、音量レベル、全画面表示の開始と終了のアイコンは同じ位置を共有し、コンポーネントの data-* 属性に応じて切り替わるようにします。位置が飛ぶのではなく、クロスフェードさせます。セット全体で線幅と視覚上のサイズを統一します。
• 頻繁に使うコントロールはすばやく操作できるようにします。 再生、一時停止、ミュート、シークは頻繁に操作されるため、押したときの反応をすぐに返し、動きはほとんど、またはまったく加えないようにします。メニューやポップオーバーはトリガーから開き、頻繁に使う設定メニューはすばやく開くようにします。
• コントロールの表示と非表示は落ち着いた動きにします。 アイドル時に非表示にする際は、短く控えめなアニメーションを使います。ポインターの移動、タッチ、キーボードフォーカスがあれば、コントロールをすぐに再表示します。初回読み込み時には何もアニメーションさせません。
• タッチ操作を第一級の操作方法として扱います。 タップでコントロールが表示されたときにホバー状態が選択状態のように残らないよう、ホバースタイルはホバー対応ポインターのクエリ内に記述します。ターゲットは最低でも 24 × 24 CSS ピクセルとし、タッチ操作ではさらに大きくします。スライダーのヒット領域は、見えているトラックよりも高くし、コントロールが密集したバーではターゲットを重ねないようにします。
• 動きはユーザーの設定を尊重します。 アニメーションの時間は、動きを減らす設定時に短縮されるトークンを通して指定します。transform、opacity、filter をアニメーションさせ、トランジションの対象となるプロパティを明示します。
• 色は用途に応じて使います。 アクセントカラーやコントロール用の面など、セマンティックトークンを使います。アクセントカラーはブランド用に保ち、デザイン上の明確な理由がない限り、どちらの配色モードでも動画コントロールは暗い色にします。
• UI テキストをハードコードしてはいけません。 表示テキスト、ツールチップ、アクセシブルネームは Video.js の i18n から取得します。組み込みのコントロールには翻訳済みのラベルが用意されています。新しい文字列は Video.js の翻訳（国際化）を通して追加します。文頭のみ大文字にし、何が起きるかを説明します。長い言語のテキストが収まる余地を確保し、右から左に読む言語ではレイアウトを反転させます。
• ツールチップとフォーカスのスタイルを統一します。 プレーヤーにツールチップがある場合、プレーヤーの端を含め、すべてのツールチップでコントロールからのオフセットとスタイルを統一します。ボタン、スライダーのつまみ、メニュー項目など、フォーカス可能なすべての要素に、スキンのトークンに基づいた同じ見た目のフォーカスリングを表示します。
• システムフォントをデフォルトにします。 サイトで使用が許可されたウェブフォントがユーザーに用意されていない限り、--media-font-family にはシステムフォントのスタックを設定します。参考デザインのウェブフォントではなくシステムフォントを選ぶ場合は、その旨をユーザーに伝えます。
• 状態を色だけで表してはいけません。 アイコンの変更、ラベル、形状のいずれかを組み合わせます。また、ステータスアナウンサーで伝わらないカスタム状態は、ライブリージョンでも通知します。