Question

有关如何附加输入风格的任何建议＆＃34;范围＆＃34;元素，它是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::input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}

CSS，HTML或纯Javascript的任何解决方案都赞赏...

Answer 1

建立Vitorino的小提琴，我能想出的最接近的解决方法是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

但是，这不会访问缓冲区数量（默认滑块上的灰色较深），并且圆圈仍为蓝色。我无法快速找到改变颜色的方法，但我可以通过添加：

将其变成灰色框

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

在视频影子DOM中定义syles

1 个答案: