javascript - 用户交互后范围 slider 的位置未更新

Question

我有一个简单的页面，其中有一个嵌入式视频和一个用作进度条的范围 slider 。Javascript 在视频播放时更新范围 slider 的值， slider 可用于在视频中前后移动。

问题是，如果我与范围 slider 交互以更改播放位置，即使在播放视频并且 javascript 正在更新 的 value 时， slider 也将不再在视觉上移动输入元素。

我可能遗漏了一些明显的基本细微差别。谢谢!

Here is the JSFiddle of the setup .

Answer 1

你的问题是这一行:

videoSlider.setAttribute("value", myVideo.currentTime);

当您与 slider 交互时，它的 value 属性实际上并没有在 HTML 中更新(在 devtools 中查看!)，但是它的内部 value 属性已更新。因此，这是我们需要更改的属性，因为它的值会取代 HTML 中实际设置的任何值。

交换那条线

videoSlider.value = myVideo.currentTime;

将解决您的问题，而且更加地道。