CODEWITHSUNDEEP
jqueryhtmlhtml5-video
Shouvik
Shouvik

Reputation: 447

how to make a seekbar using slider ui in jquery?

i used an image as id :sliderBtn

and for sliding it i wrote :

$("#sliderBtn").slider({
      value:0,
      orientation: "horizontal",
      range: "min",
      max: 100,
      step:1,
      animate: true,
      slide:  function(event, ui) {
             not sure what to write here.
           }
});

slider is not sliding for me. can any1 help me out ?? i am clueless and may endup asking a stupid question beacuse i am totally new in this field . Thanks :)

Upvotes: 0

Views: 3288

Answers (1)

Hitesh
Hitesh

Reputation: 4288

This link might help you

http://iviewsource.com/codingtutorials/building-a-ui-slider-with-javascript-and-jquery-ui/

you just need to set ui.value according to your own requirement in your case u need to get integer value from slider and give integer value to slider for better seek option in seekbar

and i have done this in jwplayer . so i am sharing my code , hope it helps 

  jwplayer().onPlay(function () {
                         var play_position=jwplayer().getPosition();
                        var hr = parseInt(( play_position / 3600 ) % 24);
                        var min = parseInt(( play_position / 60 ) % 60);
                        var sec = parseInt((play_position % 60));
                         $('#seek_position').text(hr+':'+min+':'+sec);
                         var videoLength_s = jwplayer().getDuration();
                           var slider_range=((play_position*100)/videoLength_s);
                           slider_range=Math.round(slider_range);

                        $("#seekBar").slider('option', 'value',slider_range);


 });



      //seekbar slider jquery UI slider is being used 
function slider(total)
{

var totalSecond = Math.round(total);
  $("#seekBar").slider({
    //orientation: "vertical",
    min: 0,
    max:100,
    range: "min",
    animate: true,
    slide: function(event, ui) {
           var range=ui.value;
          var currentTime=(totalSecond*range)/100;

            $('#seek_id').text(range);
          setPosition(currentTime); 
       convert(currentTime);
    }
});



function setPosition(currentTime) {


          jwplayer().seek(currentTime);

}

but i am sure if u search html5 api for in tag u can easily do it

http://www.w3.org/2010/05/video/mediaevents.html http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

:) hope it helps

Upvotes: 1

Related Questions