0

我使用图像作为 id ：sliderBtn

为了滑动它，我写道：

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

滑块不适合我。任何人都可以帮助我吗？我一无所知，最终可能会问一个愚蠢的问题，因为我在这个领域是全新的。谢谢 ：）

4

1 回答 1

1

此链接可能对您有所帮助

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

您只需要ui.value根据自己的要求进行设置，您需要从滑块中获取整数值并为滑块提供整数值，以便在搜索栏中获得更好的搜索选项

我已经在 jwplayer 中做到了这一点。所以我分享我的代码，希望它有帮助

  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);

}

但我敢肯定，如果你在标签中搜索 html5 api，你可以轻松做到

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

：） 希望能帮助到你

于 2013-05-09T06:33:20.227 回答