javascript - 在视频阴影 DOM 中定义样式

Question

有关如何在输入“范围”元素是 HTML 5 视频元素的阴影时附加样式的任何建议。根据我的理解，正常的方法将如示例 1 所示。如果您正在设置轨道的样式。

我希望实现的是颜色 1。在拇指左侧显示完整，颜色 2 在右侧显示待处理视频。

示例 1。

input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}

定位视频阴影 DOM 的方法通常是 video::的前缀，但是，下面的方法不起作用任何值得赞赏的指针。

video::input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}

感谢任何 CSS、HTML 或纯 Javascript 解决方案...

Answer 1

基于 Vitorino 的 fiddle ，我能想到的最接近的解决方法是 1) 添加一个 timeupdate计算视频播放百分比的事件监听器，然后 2) 通过更新 <style> 中的 CSS 将该百分比设置为具有多个渐变的背景元素，像这样:

HTML:

<style id="ugh"></style>
<video width="400" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video.
</video>

JS:

var run = 0;
var ss = document.getElementById("ugh");
document.getElementsByTagName("video")[0].addEventListener("timeupdate", function(){
    run = this.currentTime / this.duration * 100;
    ss.textContent = 'video::-webkit-media-controls-timeline { background-image: linear-gradient(to right, red 0%, red ' + run + '%, yellow ' + run + '%, yellow 100%);'
});

Here is the fiddle

但是，这不会访问缓冲量(默认 slider 上的深灰色)，并且圆圈仍然是蓝色的。我无法快速找到改变其颜色的方法，但我可以通过添加以下内容将其变成灰色框:

video::-webkit-media-controls-timeline {
  -webkit-appearance: none;
}