CSSでビデオプレーヤーをスタイリングする方法

CSSを使用してビデオプレーヤーの外観をカスタマイズするには、最初にビデオとカスタムコントロールを含むコンテナを作成し、CSSを介してデフォルトのコントロールを非表示にし、独自の再生インターフェイスを設計する必要があります。レスポンシブデザインを組み合わせてモバイルデバイスに適応し、ネイティブコントロールのダウンロードとピクチャーオプションを削除し、フルスクリーン、ミュート、その他の関数ボタンを展開し、最終的にモダンな外観、統一スタイル、優れたユーザーエクスペリエンスを持つビデオプレーヤーを実装します。

CSSを使用してビデオプレーヤーをスタイリングすると、外観を完全に制御できるようになり、ウェブサイトのデザインに合ったモダンで一貫した外観を作成できます。 <video></video>要素自体はデフォルトではSylableパーツが制限されていますが、HTMLとCSSを使用してその周りにカスタムインターフェイスを構築できます。効果的に行う方法は次のとおりです。

カスタムビデオコンテナを作成します

容器に<video></video>要素を包むことから始めます。これにより、スタイルとレイヤーのコントロールが簡単になります。

 <div class = "video-player">
  <ビデオsrc = "example.mp4" class = "video-element"> </video>
  <div class = "video-controls">
    <button class = "play-pause"> play </button>
    <入力型= "range" class = "seek-bar" value = "0">
    <入力型= "range" class = "volume-bar" value = "1" min = "0" max = "1" step = "0.1">
  </div>
</div>

コンテナに基本的なスタイリングを適用して、サイズ、境界、およびレイアウトを制御します。

 .video-player {
  位置：相対;
  幅：80％;
  最大幅：800px;
  マージン：2REMオート;
  オーバーフロー：隠し;
  ボーダーラジウス：12px;
  背景：＃000;
  Box-Shadow：0 4px 10px RGBA（0、0、0、0.3）;
}

.video-element {
  幅：100％;
  高さ：自動;
  表示：ブロック;
}

清潔でモダンな外観でコントロールをスタイリングします

デフォルトのブラウザコントロールはスタイルが困難であるため、それらを隠して独自に構築すると、より良い結果が得られます。

 .video-controls {
  ディスプレイ：Flex;
  Align-Items：Center;
  背景：RGBA（0、0、0、0.7）;
  パディング：10px;
  ギャップ：10px;
  不透明：0;
  遷移：不透明度0.3秒の容易さ。
}

.Video-Player：Hover .Video-Controls {
  不透明：1;
}

.play-pause {
  背景：#ffff;
  国境：なし;
  パディング：8px 12px;
  ボーダーラジウス：4px;
  カーソル：ポインター;
  フォントサイズ：14px;
  font-weight：bold;
}

.play-pause：hover {
  背景：＃e0e0e0;
}

シークバーとボリュームバーの場合、デフォルトの外観をCSSでオーバーライドします。

 .seek-bar、
.volume-bar {
  -webkit-acpearance：none;
  幅：100％;
  高さ：6px;
  背景：＃444;
  アウトライン：なし;
  ボーダーラジウス：3px;
  カーソル：ポインター;
}

.seek-bar :: -webkit-slider-thumb、
.volume-bar :: -webkit-slider-thumb {
  -webkit-acpearance：none;
  高さ：14px;
  幅：14px;
  背景：#ffff;
  ボーダーラジウス：50％;
  カーソル：ポインター;
}

.seek-bar ::-moz-range-thumb {
  高さ：14px;
  幅：14px;
  背景：#ffff;
  ボーダーラジウス：50％;
  国境：なし;
  カーソル：ポインター;
}

それを応答し、ネイティブコントロールを非表示にします

controls属性を削除した]を使用してデフォルトのコントロールを常に無効にするか、 controlslist="nodownload"を使用して部分的なコントロールを使用してください。また、応答性を確保します：

 @media（max-width：600px）{
  .video-player {
    幅：95％;
  }

  .video-controls {
    ギャップ：5px;
    パディング：8px;
  }

  .play-pause {
    パディング：6px 10px;
    フォントサイズ：12px;
  }
}

そしてあなたのHTMLで：

 <ビデオsrc = "example.mp4" class = "video-element" controlslist = "nodownload" disablepictureinpicture> </video>

これにより、ダウンロードやPIPなどの不要なオプションが削除され、クリーナーUIが得られます。

オプション：フルスクリーンとその他のボタンを追加します

フルスクリーン、ボリュームミュート、または再生速度のボタンを使用してコントロールバーを拡張できます。同じデザイン言語（シンプルなアイコンまたはテキスト、丸いボタン、ホバーエフェクト）を使用して、一貫してスタイリングします。

 .fullscreen-button {
  マージン左：自動;
  背景：透明;
  国境：なし;
  色：#ffff;
  フォントサイズ：18px;
  カーソル：ポインター;
}

.fullscreen-button：Hover {
  Text-Shadow：0 0 4px #fff;
}

JavaScriptを使用して、フルスクリーンの切り替えやSeek Barの更新などの機能を処理します。

CSSでビデオプレーヤーをスタイリングすることは、主にデフォルトのUIを隠し、自分で構築することです。使いやすさ、コントラスト、応答性に焦点を当てます。いくつかの適切に配置されたスタイルとスマートレイアウトの選択により、睡眠、ブランドのビデオエクスペリエンスを作成できます。基本的に、それは複雑なコードよりも構造と一貫性に関するものです。

以上がCSSでビデオプレーヤーをスタイリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。