TubePlayer使用jquery ui滑块插入视频当前时间同步

时间:2012-01-04 23:39:49

标签: javascript jquery youtube slider chromeless

帮助我找到解决方案的一些资源:)

  1. 功能齐全的Chromeless播放器仅缺少与视频当前时间的ui滑块同步:http://jsfiddle.net/GR7Z2/45/
  2. jquery UI滑块文档http://jqueryui.com/demos/slider/#option-value
  3. tikku chromless player plugins documentation http://www.tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_3
  4. 我遇到的问题是将jquery滑块值设置为当前时间(以秒为单位)并与当前时间保持同步 我试过了:

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

    虽然我已经想过如何使用滑块在视频中寻找时间 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 个答案:

答案 0 :(得分:1)

我正在寻找与您在这里建造完全相同的解决方案。

感谢您使用滑块功能!

我这样做完了脚本:

$( "#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);

希望它有所帮助!