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

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

HTML

純粋なHTML5：

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

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

CSSスタイリング

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

進(jìn)行狀況[値] {
  外観：なし; / * safari */
  國境：なし; / * firefox */
  色：＃e52e71; /* 後退する */
}

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

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

JavaScript：ドットを接続します

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

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

洗練されたコードは、國家管理と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 =一時(shí)停止します。

関數(shù)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（）{
  狀態(tài)=一時(shí)停止;
  button.innerhtml = "?";
}

関數(shù)onclick（）{
  if（state ===一時(shí)停止）{
    video.play（）;
  } それ以外 {
    video.pause（）;
  }
}

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

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

以上がHTMLビデオと進(jìn)捗狀況で無邪気な楽しみの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。