如何在html中选择视频的时间？答案

【问题标题】：How to select the time of a video in html?如何在html中选择视频的时间？
【发布时间】：2022-02-04 15:32:44
【问题描述】：

我正在使用 vue.js 创建一个网站，用户可以在其中选择视频中弹出内容的时间。问题是我无法选择视频的时间。

例如：用户希望在 5:00 在他的视频中弹出一个图像。如何让用户选择时间，让图像在正确的时间显示？

【问题讨论】：

【解决方案1】：

这里是使用原始javascript 的方法。只需将其应用到您的代码中即可。

<!DOCTYPE html> 
<html> 
<body> 

<video width="200" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

<br>

<big><span id="popup">Here will be popup</span></big>
<br>
<label for="time_to_popup">do popup after (secs): </label>
<input type="text" id="time_to_popup" value="2" name="time_to_popup">

<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

<script>
var intervalID = null;

// get video object
const video = document.querySelector('video');

// if play is started set interval to check play time
// and do popup if playing time bigger than popup trigger time
video.addEventListener('play', (event) => {
  intervalID = setInterval(function() {
    if (video.currentTime > parseInt(document.getElementById("time_to_popup").value)) {
       document.getElementById("popup").textContent = "BOOOOOOM !!!!!";
    }
  }, 1000);
});

// remove interval and revert popup message to normal text
// if video is paused
video.addEventListener('pause', (event) => {
  document.getElementById("popup").textContent = "Here will be popup";
  clearInterval(intervalID);
});
</script>

</body> 
</html>

简而言之：

html5 视频对象具有currentTime (video.currentTime) 属性，可用于获取当前时间。您也可以使用paused (video.paused) 属性来检查是否正在播放视频。

【讨论】：