如何使用html视频屏蔽输入类型范围

这是我的小提琴：http://jsfiddle.net/R9nyW/226/。如何使用html视频屏蔽输入类型范围

这是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

来源

2016-01-13 Chester

尝试使用RGB改变值的数目 – Jacob

它与RGB – Chester

我说的一样，而视频播放。无静态 – Chester

我想的是，左侧（从视频经过的时间），以有背景颜色：蓝色，右侧有一个背景色（从视频剩余时间）：黄色。

您应该使用伪选择器::-moz-range-progress，它代表传递的“轨道”部分。

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

虽然这是非标准的，但浏览器的兼容性有限。如你所愿自定义。

JsFiddle Demo

JsFiddle with HTML5 progressbar

Reference

来源

2016-01-13 13:37:23 urbz

它仅适用于Firefox。你也可以在铬上做到这一点？这将是伟大的:) – Chester

正如我所提到的，这具有非常有限的浏览器兼容性。它仍然是你以后..为了更好的兼容性，看看HTML5的进度条..看到更新[JsFiddle]（https://jsfiddle.net/uh7axfm5/11/）。不幸的是，也相当有限。Psuedo-elements在浏览器上的工作非常不稳定。 – urbz

非常感谢！ – Chester

-1

基本上，首先从所有浏览器中删除所有appareance后用浏览器的构造选择适用apparence： - 到滑块拇指和 - 距离向拇指

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

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

对于在所有浏览器中完全按照您希望的方式设计的范围，您将从HTMLElement（s）中进行绑定，这些绑定表示实时更改范围值的假范围。

也可以应用双向绑定，以允许更改范围的真实值以报告假冒范围的更改。

来源

2016-01-13 13:04:01

Srry我不知道，在左侧有背景色X和右侧有背景色Y时，请在URL中看到一个示例。 – Chester

我将使用JSFiddle更新 –

如何使用html视频屏蔽输入类型范围

回答

相关问题