如何使用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視頻屏蔽輸入類型範圍

回答

相關問題