Question

这是html代码：

<video id="video" width="500"  autoplay="true">
     <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
            <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm" /></video>
<div id="Layer"></div>
<input type="range" id="seek-bar" value="0">

javascript代码：

  jQuery(function ($) {
       $("#video").on("timeupdate", function () {
            var myVideo = $(this)[0];
            var value = (100 / myVideo.duration) * myVideo.currentTime;
            $("#seek-bar").val(value);
 /* x = "-webkit-gradient(
        linear,
        left top,
        right top,
        color-stop("+value+", '#fff'),
        color-stop("+value+", '#000')
    );";
         $("#seek-bar").css("background-color", x);*/
        });
    });

我想要实现的是输入范围的左侧有背景色X而右侧是背景色Y，而视频正在播放。我怎么能这样做，thx

Answer 1

我希望左侧（从视频传递的时间）有一个背景颜色：蓝色，右侧（剩余时间）视频）有背景色：黄色。

你应该使用伪代表::-moz-range-progress代表“轨道”传递的部分。

input[type=range]::-moz-range-progress {
  background: blue;
  height: 1em;
}

虽然这是非标准的，并且浏览器兼容性有限。根据需要自定义。

JsFiddle Demo

JsFiddle with HTML5 progressbar

Reference

Answer 2

基本上，首先从浏览器构造函数选择器中删除所有浏览器并使用浏览器构造函数选择器后应用： - 滑块拇指和 - 到范围拇指

这似乎就是你想要的： - Styling Cross-Browser Compatible Range Inputs with CSS。

但这不会涵盖所有浏览器。

对于在所有浏览器上完全按照您想要的方式设计的范围，您将从HTMLElement执行绑定，这些绑定表示实时更改范围值的假范围。

还可以应用双向绑定，以允许任何更改范围的实际值来报告假范围的变化。

如何使用html视频来处理输入类型范围

2 个答案: