Javascript YouTube, как ползунок управления

Question

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

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

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

В настоящее время я использую 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?

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

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