該項目始于關(guān)于欺凌的工作場所培訓(xùn)視頻，這是真正鼓舞人心的創(chuàng)意能源的來源！該視頻的優(yōu)雅UI，尤其是其梯度進(jìn)度欄，引發(fā)了一個想法。我知道在<progress></progress>元素是可能的（感謝Pankaj Parashar的2016年CSS-Tricks帖子），但并未深入研究視頻操縱或JavaScript。挑戰(zhàn)在進(jìn)行！

目標(biāo)很簡單：將進(jìn)度條的價值同步到視頻的播放進(jìn)度。事實(shí)證明，它比預(yù)期的更有趣。

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樣式

我不會重新調(diào)整Pankaj的出色CSS，但這是梯度進(jìn)度欄的代碼，確保了跨瀏覽器的兼容性：

進(jìn)度[value] {
  外觀：無； / * Safari */
  邊界：無； / * Firefox */
  顏色：＃e52e71; /* 倒退 */
}

進(jìn)度[value] ::  -  webkit-progress-value {
  背景圖像：線性級別（在右側(cè)，＃ff8a00，＃e52e71）;
  過渡：寬度1S線性；
}

進(jìn)度[value] ::  -  moz-progress-bar {
  背景圖像：-moz-linear-Gradient（右，＃ff8a00，＃e52e71）;
}

JavaScript：連接點(diǎn)

JavaScript涉及以下步驟：

1. 獲取當(dāng)前的視頻時間和持續(xù)時間： video.currentTime和video.duration 。
2. 計算進(jìn)度百分比：（ (currentTime / duration) * 100 。
3. 更新進(jìn)度欄值： progress.value = roundedPercentage 。
4. 顯示經(jīng)過的時間：更新計時器元素。

這是精致的代碼，并結(jié)合了國家管理和requestAnimationFrame ，以提高性能（多虧了Neal Fennimore的寶貴意見）：

 const video = document.queryselector（'video'）;
const progress = document.getElementById（'progress'）;
const timer = document.getElementById（'timer'）;
const button = document.getElementById（'play'）;

const暫停='Paused';
const play ='play';
令狀態(tài)=暫停;

功能progressloop（）{
  如果（狀態(tài)===播放）{
    progress.value = Math.Round（（video.currenttime / video.duration） * 100）;
    timer.innerhtml = Math.Round（video.currenttime）'seconds';
    requestAnimationFrame（ProgressLoop）;
  }
}

函數(shù)onplay（）{
  狀態(tài)=播放;
  progressloop（）;
  button.innerhtml =“??”;
}

函數(shù)onpause（）{
  狀態(tài)=暫停;
  button.innerhtml =“?”;
}

功能onclick（）{
  如果（狀態(tài)===暫停）{
    video.play（）;
  } 別的 {
    video.pape（）;
  }
}

Video.AddeventListener（'Play'，OnPlay）;
Video.AddeventListener（'pause'，on pape）;
button.AddeventListener（'click'，onclick）;

該代碼有效地更新了進(jìn)度欄和計時器，提供了平穩(wěn)，響應(yīng)迅速的用戶體驗。添加播放/暫停按鈕可增強(qiáng)可用性，而狀態(tài)管理和requestAnimationFrame的使用則確保了清潔且性能的實(shí)現(xiàn)。是的，我進(jìn)行了訓(xùn)練視頻測驗！

以上是HTML視頻和進(jìn)度的一些無辜的樂趣的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！