Как выбрать тип входного типа с помощью html video

Question

Это моя скрипка: http://jsfiddle.net/R9nyW/226/.

Это 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, в то время как видео воспроизводится. Как я могу это сделать, ТНХ

Answer 1

Я хочу, чтобы левая сторона (время, прошедшее с видео), чтобы иметь цвет фона: синий и правую сторону (время, оставшееся от на видео), чтобы иметь цвет фона: желтый.

Вы должны использовать psuedo-selector ::-moz-range-progress, который представляет часть пройденной «дорожки».

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

Это нестандартное, хотя и имеет ограниченную совместимость с браузером. Настройте, как хотите.

JsFiddle Demo

JsFiddle with HTML5 progressbar

---

Reference

Answer 2

В принципе, сначала удалить все appareance из всех браузер и после того, как применить apparence с селектором браузера конструктора: - для слайдера-эмпирического и - к диапазону-эмпирическому

Это кажется это то, что вы хотите: - Styling Cross-Browser Compatible Range Inputs with CSS.

Но это не распространяется на все браузеры.

Для диапазона, полностью спроектированного таким образом, который вы хотите использовать во всех браузерах, вы сделаете привязку из HTMLElement (ов), которые представляют собой поддельный диапазон, который в реальном времени изменяет значение диапазона.

Также возможно применить двустороннюю привязку, чтобы разрешить любое изменение реального значения диапазона для изменения отчета в вашем поддельном диапазоне.