HTML視頻和進度的一些無辜的樂趣

該項目始於關於欺凌的工作場所培訓視頻，這是真正鼓舞人心的創意能源的來源！該視頻的優雅UI，尤其是其梯度進度欄，引發了一個想法。我知道在<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，但這是梯度進度欄的代碼，確保了跨瀏覽器的兼容性：

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

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

進度[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（'timer'）;
const button = document.getElementById（'play'）;

const暫停='Paused';
const play ='play';
令狀態=暫停;

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

函數onplay（）{
  狀態=播放;
  progressloop（）;
  button.innerhtml =“❙❙”;
}

函數onpause（）{
  狀態=暫停;
  button.innerhtml =“►”;
}

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

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

該代碼有效地更新了進度欄和計時器，提供了平穩，響應迅速的用戶體驗。添加播放/暫停按鈕可增強可用性，而狀態管理和requestAnimationFrame的使用則確保了清潔且性能的實現。是的，我進行了訓練視頻測驗！

以上是HTML視頻和進度的一些無辜的樂趣的詳細內容。更多資訊請關注PHP中文網其他相關文章！