Плагины TubePlayer Видео текущая синхронизация времени с помощью слайдера jquery ui - PullRequest
Новая
       32

Плагины TubePlayer Видео текущая синхронизация времени с помощью слайдера jquery ui

0 голосов
/ 05 января 2012

Просто некоторые ресурсы, которые помогут мне найти решение:)

  1. Полностью функционирующему проигрывателю Chromeless не хватает только синхронизации слайдера пользовательского интерфейса с текущим временем видео: http://jsfiddle.net/GR7Z2/45/
  2. jquery UIдокументация по слайдеру http://jqueryui.com/demos/slider/#option-value
  3. документация по плагинам tikku chromless player http://www.tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_3

Проблема, с которой я столкнулся, заключается в установке значения ползунка jquery на текущее время в секундах и синхронизации стекущее время, которое я пробовал: 

  var seektime = $("#youtube-player-container").tubeplayer("data").currentTime;
                $( "#slider" ).slider( "option", "value", seektime );

ALTHOUGH Я уже понял, как искать время в видео с помощью ползунка, JQuery очень долго и грязно, поэтому я рекомендую просмотретьэто на jsfiddle http://jsfiddle.net/GR7Z2/45/ для более ясного понимания, но здесь это в любом случае 

$(".pause").hide();
$(".unmute").hide();
jQuery("#youtube-player-container").tubeplayer({
    width: 600,
    height: 450,
    showControls: 0,
    allowFullScreen: "true", 
    modestbranding: false,
    initialVideo: "Y70rcfQEK7U",
    preferredQuality: "default",
    onPlay: function(id){$(".play").hide();}, 
    onPause: function(){$(".pause").hide();$(".play").show();},
    onStop: function(){$(".pause").hide();$(".play").show();},
    onSeek: function(time){},
    onMute: function(){$(".mute").hide();$(".unmute").show();},
    onUnMute: function(){$(".unmute").hide();$(".mute").show();},
    onPlayerUnstarted: function(){},
    onPlayerPlaying: function(){$(".play").hide();$(".pause").show();},
    onPlayerBuffering: function(){$(".pause").show();}
});
$(".play").click(function(){
    $("#youtube-player-container").tubeplayer("play");
});
$(".pause").click(function(){
    $("#youtube-player-container").tubeplayer("pause");
}); 
$(".stop").click(function(){
    $("#youtube-player-container").tubeplayer("stop");
});
$(".mute").click(function(){
    $("#youtube-player-container").tubeplayer("mute");
}); 
$(".unmute").click(function(){
    $("#youtube-player-container").tubeplayer("unmute");
});

        function getYouTubeInfo() {
                $.ajax({
                        url: "http://gdata.youtube.com/feeds/api/videos/Y70rcfQEK7U?v=2&alt=jsonc",
                        dataType: "json",
                        success: function (data) {parseresults(data)}
                });
        }

        function parseresults(result) {
                console.log(result);    
                var vidlength = result.data.duration;   

                $('#vidlength').html(vidlength); 
            $(function() {
        $( "#slider" ).slider({ max: vidlength });
 $( "#slider" ).bind( "slidechange", function(event, ui) {
  var viseekto = $('#slider').slider('value');
     jQuery("#youtube-player-container")
       .tubeplayer("seek", viseekto);
});
  var seektime = $("#youtube-player-container").tubeplayer("data").currentTime;
                $( "#slider" ).slider( "option", "value", seektime );

    });
        }
$(document).ready(function () {
        getYouTubeInfo();
});

1 Ответ

1 голос
/ 21 января 2012

Я смотрю на то же самое решение, которое вы строите здесь.

Спасибо за функцию слайдера!

Я закончил сценарий следующим образом: 

$( "#slider" ).slider({ 
    max: $("#video").tubeplayer("data").duration,
    stop: function(event, ui) {
        var viseekto = $('#slider').slider('value');
        jQuery("#video").tubeplayer("seek", viseekto);
    },
});
window.setInterval(function() {
    var seektime = $("#video").tubeplayer("data").currentTime;
    $( "#slider" ).slider( "option", "value", seektime );
}, 1000);

Надеюсь, это поможет!

...