カスタムHTML5ビデオプレーヤーインターフェイスの構築

カスタムHTML5ビデオプレーヤーを作成するには、HTML構造を設定し、制御インタラクションを実装し、CSSスタイルを設計する必要があります。 1.インフラストラクチャの設定：

ウェブサイトスタイルと柔軟性に沿ったビデオ再生エクスペリエンスが必要な場合は、カスタムHTML5ビデオプレーヤーが良い選択です。デフォルトのブラウザ再生コントロールはシンプルで使いやすいですが、そのスタイルと機能は限られています。自分で一連のインターフェイスを作成できます。これは、外観を制御するだけでなく、関数を拡張することもできます。

インフラストラクチャ：HTMLおよびビデオ要素設定

まず、 <video></video>タグと自分で設計したコントロールエリアを含む基本的なHTML構造が必要です。 <video></video>要素はコアです。 controlsListやwebkit-playsinlineなどのプロパティを追加して、さまざまなデバイスでの互換性を向上させることを忘れないでください。

 <ビデオID = "myVideo" src = "video.mp4"> </video>
<div class = "custom-controls">
  <ボタンID = "playpause"> play </button>
  <入力型= "範囲" id = "progress" value = "0">
  <span id = "currenttime"> 0:00 </span>/<span id = "duration"> 0:00 </span>
</div>

この方法で書き込み、Native Controls（ video[controls] { display: none; } ）をCSSを介して非表示にしてから、JavaScriptで再生ロジックの制御を開始できます。

コントロールインタラクション：再生/一時停止と進行状況バーの更新

この部分は、主にJavaScriptの仕事に関するものです。ボタンクリックイベントを聞くには、再生ステータスを切り替え、リアルタイムで進行状況バーと時間の表示を更新する必要があります。

一般的な慣行は次のとおりです。

• クリックイベントを再生ボタンにバインドし、現在再生されているかどうかに基づいて.play()または.pause()を呼び出すことにします。
• ビデオtimeupdateイベントを聞いて、約1秒ごとに進行状況バーとタイムタグを更新します
• 進行状況バーがドラッグされたときにビデオの現在の再生時間を更新します

const video = document.getElementById（ 'myVideo'）;
const playbtn = document.getElementById（ 'playpause'）;
const Progress = document.getElementById（ 'Progress'）;
const currentTime = document.getElementById（ 'currentTime'）;
const duration = document.getElementById（ 'duration'）;

playbtn.addeventlistener（ 'click'、（）=> {
  if（video.paused）{
    video.play（）;
    playbtn.textContent = 'Pause';
  } それ以外 {
    video.pause（）;
    playbtn.textcontent = 'play';
  }
}）;

video.addeventlistener（ 'timeUpdate'、（）=> {
  Progress.value =（video.currenttime / video.duration） * 100;
  //時間のフォーマットは省略されており、math.floor padstart}）によって実装できます}）;

ここでは、一部のモバイルブラウザでは自動再生を制限するか、ユーザーインタラクションが再生される必要があるため、ボタンをクリックした後に再生操作をトリガーするのが最善です。

カスタムスタイル：CSSはプレイヤーの外観をデザインします

構造と相互作用により、CSSを使用して、好きなようにドレスアップできます。ボタンに背景画像を追加し、進行状況バースライダースタイルを調整し、ボリュームコントロール、フルスクリーンボタンなどを追加することもできます。

いくつかのヒント：

• appearance: none
• 擬似要素と勾配を備えたプレイボタンを美しくします
• 制御レイアウトは、FlexBoxにすばやく整列できます

小さな例については、ネイティブの進行状況バーを非表示にして、色付きの進行状況インジケーターを描画します。

 .custom-controls input [type = "range"] {
  -webkit-acpearance：none;
  高さ：6px;
  背景：#ddd;
  ボーダーラジウス：3px;
}

.custom-controls input [type = "range"] :: -webkit-slider-thumb {
  -webkit-acpearance：none;
  幅：16px;
  高さ：16px;
  背景：＃007bff;
  ボーダーラジウス：50％;
}

基本的にそれだけです。構造からインタラクション、スタイル、ステップバイステップ、実用的で美しいHTML5ビデオプレーヤーインターフェイスを作成できます。複雑ではありませんが、時間のフォーマット、モバイル互換性、プログレスバーのドラッグアンドドロップ応答など、詳細を無視するのは簡単です。効果にもっと注意を払ってください。

以上がカスタムHTML5ビデオプレーヤーインターフェイスの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。