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中文网其他相关文章！