javascript youtube как управление ползунком

Question

У меня вопрос о реализации элемента управления ползунка в браузере.

Мне нужно воспроизвести данные со временем в браузере. У меня будет один рабочий, заполняющий буфер воспроизведения, делая вызовы в REST api. Затем поток пользовательского интерфейса будет потреблять буфер и воспроизводить данные пользователю.

Я хочу имитировать контроль пользовательского интерфейса YouTube. Он показывает вам в одном элементе управления пользовательского интерфейса, сколько вы наблюдали, и сколько было предварительно запрограммировано. Можно ли настроить ползунок для этого? Ползунок диапазона jQuery UI не совсем то, что я хочу

В настоящее время я использую jQuery на своем веб-сайте, поэтому предпочел бы решение, основанное на этой структуре.

Answer 1

Вы можете просто изменить JQuery UI ползунок немного, используя собственное фоновое изображение, а затем регулировать ширину, чтобы показать прогресс загрузки (demo):

$(function(){ 

    var ytplayer = $('#player')[0], 
     // # seconds from YouTube API 
     duration = ytplayer.getDuration(), 
     // # bytes 
     totalBytes = ytplayer.getVideoBytesTotal(), 
     // start # bytes - may not be necessary 
     startBytes = ytplayer.getVideoStartBytes(); 

    $("#slider").slider({ 
     range: "max", 
     min: startBytes, 
     max: duration, 
     value: 1 
    }) 
    // image: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/blitzer/images/ui-bg_highlight-soft_15_cc0000_1x100.png 
    // with a 30% opacity 
    .css('background-image', 'url(http://i56.tinypic.com/fbjad2.png)'); 

    // Loop to update slider 
    function loop() { 
     var time = ytplayer.getCurrentTime(), 
      // make loaded a percentage 
      loaded = 100 - (ytplayer.getVideoBytesLoaded()/totalBytes) * 100; 

     // set limit - no one likes negative widths 
     if (loaded < 0) { loaded = 0; } 

     // update time on slider 
     $('#slider') 
      .slider('option', 'value', time) 
      .find('.ui-widget-header').css('width', loaded + '%'); 

     // repeat loop as needed 
     if (loaded < 0 || time < duration) { 
      setTimeout(loop, 500); 
     } 
    } 
    loop(); 
}); 

Answer 2

Может попробовать также goog.ui.Slider из библиотеки Google Closure?

Нажмите на ссылку "demo" на этой странице, чтобы увидеть демоверсию.

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