html5 video监听进度条人为变动

可以通过监听`timeupdate`事件来实现对进度条的人为变动。当用户拖动进度条时，可以使用`currentTime`属性来设置视频的当前时间，从而实现进度条的变动。以下是一个示例代码：

var video = document.getElementById("myVideo");
var progressBar = document.getElementById("progressBar");

video.addEventListener("timeupdate", function() {
  var progress = video.currentTime / video.duration * 100;
  progressBar.style.width = progress + "%";
});

progressBar.addEventListener("click", function(e) {
  var pos = (e.pageX - this.offsetLeft) / this.offsetWidth;
  video.currentTime = pos * video.duration;
});

在这个示例中，我们监听了`timeupdate`事件来获取视频的当前时间，并计算出进度条的宽度。当用户点击进度条时，我们计算出点击位置在进度条上的百分比，并根据视频的总时长设置当前时间，从而实现进度条的人为变动。

相关问题

html5 如何让video进度条可以拖动

要让HTML5 Video进度条可以拖动，你需要使用JavaScript来监听拖动事件并更新视频的当前时间。

以下是实现的步骤：

1. 首先，在HTML中创建一个video元素和一个进度条元素。进度条元素可以是一个range input或者是一个自定义的div元素。

2. 添加JavaScript代码，使用addEventListener()函数监听进度条的拖动事件。当进度条被拖动时，获取进度条的当前值，并将视频的currentTime属性设置为该值。

3. 同时，还需要监听视频的timeupdate事件，以更新进度条的值。在事件处理程序中，获取视频的当前时间并将其与视频的总时间进行比较，从而计算出进度条的当前值。

以下是一个示例代码：

HTML:

<video id="myVideo" src="video.mp4"></video>
<input type="range" id="progressBar" value="0" step="0.01">

JavaScript:

var video = document.getElementById("myVideo");
var progressBar = document.getElementById("progressBar");

progressBar.addEventListener("input", function() {
  video.currentTime = progressBar.value * video.duration;
});

video.addEventListener("timeupdate", function() {
  progressBar.value = video.currentTime / video.duration;
});

这样，你就可以通过拖动进度条来控制HTML5视频的播放进度了。

html5 video进度条禁止拖动如何解决

可以通过监听video的timeupdate事件，在事件回调函数中设置当前时间为进度条的值，从而禁止用户拖动进度条。

示例代码如下：

var video = document.getElementById('my-video');
var progressBar = document.getElementById('progress-bar');

video.addEventListener('timeupdate', function() {
  // 禁止进度条拖动
  progressBar.value = video.currentTime;
});

在上面的代码中，`my-video`是视频元素的ID，`progress-bar`是进度条元素的ID。在事件回调函数中，`progressBar.value`被设置为`video.currentTime`，这样进度条的值就会随着视频播放的进度而更新。由于进度条被设置为只读，因此用户无法拖动它。