HTMLビデオと進捗状況で無邪気な楽しみ

このプロジェクトは、いじめに関する職場でのトレーニングビデオから始まりました。これは、創造的なエネルギーの本当に刺激的な源です！ビデオのエレガントなUI、特にGradient Progress Barは、アイデアを引き起こしました。同様のグラデーションを作成することを知っていました<progress></progress>要素は可能でした（Pankaj Parasharの2016 CSS-Tricks投稿のおかげで）が、ビデオ操作やJavaScriptを広範囲に掘り下げていませんでした。挑戦が始まった！

目標は単純でした。ビデオの再生進行と進行状況バーの価値を同期させます。予想以上に楽しいことが証明されました。

HTML

純粋なHTML5：

<video src="http://html5videoformatconverter.com/data/images/happyfit2.mp4"></video>
<figcaption>
  <button id="play">►►</button>
  <progress id="progress" max="100" value="0">進捗</progress>
  <label for="progress" id="timer" role="timer"></label>
</figcaption>

<progress></progress>要素がキー： max="100"は最大値を設定し、 value="0"はゼロに初期化し、0％の進行状況を表します。

CSSスタイリング

Pankajの優れたCSSを再ハッシュすることはありませんが、Gradient Progress Barのコードを次に示し、クロスブラウザーの互換性を確保します。

進行状況[値] {
  外観：なし; / * safari */
  国境：なし; / * firefox */
  色：＃e52e71; /* 後退する */
}

Progress [value] :: -webkit-progress-value {
  背景イメージ：線形勾配（右、＃ff8a00、＃e52e71）;
  遷移：幅1Sリニア。
}

Progress [value] :: -Moz-Progress-Bar {
  バックグラウンドイメージ：-moz-linear-gradient（右、＃ff8a00、＃e52e71）;
}

JavaScript：ドットを接続します

JavaScriptにはこれらの手順が含まれます。

1. 現在のビデオ時間と期間を取得： video.currentTimeとvideo.duration 。
2. 進行状況の割合を計算：（ (currentTime / duration) * 100 。
3. 進行状況バーの値： progress.value = roundedPercentage 。
4. エルプス時間を表示：タイマー要素を更新します。

洗練されたコードは、国家管理とrequestAnimationFrameを組み込んで、パフォーマンスを向上させます（Neal Fennimoreの貴重な入力のおかげです）：

 const video = document.queryselector（ 'video'）;
const Progress = document.getElementById（ 'Progress'）;
const timer = document.getElementById（ 'タイマー'）;
const button = document.getElementById（ 'play'）;

const paused = 'Paused';
const playing = 'playing';
state =一時停止します。

関数progressloop（）{
  if（state === playing）{
    Progress.value = Math.Round（（video.currenttime / video.duration） * 100）;
    timer.innerhtml = math.round（video.currenttime） 'senceds';
    RequestAnimationFrame（ProgressLoop）;
  }
}

function onplay（）{
  state = playing;
  Progressloop（）;
  button.innerhtml = "❙❙";
}

function onpause（）{
  状態=一時停止;
  button.innerhtml = "►";
}

関数onclick（）{
  if（state ===一時停止）{
    video.play（）;
  } それ以外 {
    video.pause（）;
  }
}

video.addeventlistener（ 'play'、onplay）;
video.addeventlistener（ 'Pause'、onPause）;
button.addeventlistener（ 'click'、onclick）;

このコードは、進行状況バーとタイマーを効率的に更新し、スムーズで応答性の高いユーザーエクスペリエンスを提供します。 Play/Pauseボタンを追加すると、ユーザビリティが向上しますが、 requestAnimationFrameの州管理と使用により、クリーンでパフォーマンスのある実装が保証されます。そして、はい、私はそのトレーニングビデオクイズを攻撃しました！

以上がHTMLビデオと進捗状況で無邪気な楽しみの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。