Note that there are some explanatory texts on larger screens.

plurals
  1. POTubePlayer Plugins Video current time sync with jquery ui slider
    primarykey
    data
    text
    <p>Just some resources to help to help me find a solution :)</p> <ol> <li>Fully functioning Chromeless player lacking only ui slider synchronisation with video current time : <a href="http://jsfiddle.net/GR7Z2/45/" rel="nofollow">http://jsfiddle.net/GR7Z2/45/</a></li> <li>jquery UI slider documentation <a href="http://jqueryui.com/demos/slider/#option-value" rel="nofollow">http://jqueryui.com/demos/slider/#option-value</a></li> <li>tikku chromless player plugins documentation <a href="http://www.tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_3" rel="nofollow">http://www.tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_3</a></li> </ol> <p>The problem I am having is setting the jquery slider value to the current time in seconds and keep in sync with the current time i have tried:</p> <pre><code> var seektime = $("#youtube-player-container").tubeplayer("data").currentTime; $( "#slider" ).slider( "option", "value", seektime ); </code></pre> <p><strong>ALTHOUGH</strong> i have already figured how to seek to a time in the video using the slider the jquery is very long and messy soo i reccomend viewing it on jsfiddle <a href="http://jsfiddle.net/GR7Z2/45/" rel="nofollow">http://jsfiddle.net/GR7Z2/45/</a> for a clearer understanding but here it is any way</p> <pre><code>$(".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&amp;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(); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload