与jQuery UI的滑块TubePlayer插件视频当前时间同步

问题描述:

只是一些资源,帮助帮我想想办法:)与jQuery UI的滑块TubePlayer插件视频当前时间同步

  1. 缺乏与视频当前时间只有UI滑块同步全功能的控件播放器:http://jsfiddle.net/GR7Z2/45/
  2. jQuery UI的滑块文档http://jqueryui.com/demos/slider/#option-value
  3. tikku chromless播放器的插件文件http://www.tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_3

ŧ

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

虽然我已经想通了如何寻求一个时间:我有与当前时间 我已经尝试设置jQuery的滑块值到当前的时间(秒),并保持同步,他的问题在使用滑块视频 的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(); 
}); 

进出口寻找在完全相同的解决方案,当你建造这里。

谢谢你的滑块功能!

我已经这样完成了剧本:

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

希望它能帮助!

+0

http://jsfiddle.net/GR7Z2/70/不起作用:/ – Fiddler 2012-01-22 00:31:09

+0

感谢!你帮了我$(“#video”)。tubeplayer(“data”)。currentTime;大! – 2015-12-29 14:52:05