jQuery UI Slider запаздывает при скольжении

1

У меня это видео синхронизировано с этим слайдером jQuery UI, он, кажется, отстает и не чувствует себя гладким при чистке, никакой помощи?

ДЕМО: http://codepen.io/mistkaes/pen/MwONzK?editors=001

JQuery:

String.prototype.toHHMMSS = function() {
  var sec_num = parseInt(this, 10);
  var hours = Math.floor(sec_num / 3600);
  var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
  var seconds = sec_num - (hours * 3600) - (minutes * 60);

  if (hours < 10) {
    hours = "0" + hours;
  }

  if (minutes < 10) {
    minutes = "0" + minutes;
  } 

  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  var time = hours + ":" + minutes + ":" + seconds;
  time = time.replace(/^0+/, '');
  time = time.replace(/^[^\w\s]/gi, '');
  return time;
}

$("#range").slider({
  range: "min",
   start: function(event, ui) { player.pauseVideo(); },
  stop: function(event, ui) { player.playVideo(); },
  slide: function(event, ui) {   
  //  player.pauseVideo();
    player.seekTo(ui.value,true);   
   return false;
  }
});

$("#volume-range").slider({
  range: "min",
  value: 50,
});

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '282',
    width: '502',
    videoId: 'QExOaGT_ids',
    playerVars: {
      'controls': 0,
      'showinfo': 0,
      'iv_load_policy': 3,
      'rel': 0,
    },
    events: {
      'onReady': onPlayerReady,
    }
  });
}

setInterval(function() {
  $("#content").text("video_time: " + player.getCurrentTime().toString().toHHMMSS());

  $("#range").slider("value", player.getCurrentTime());
  $("#range").slider("option", "max", player.getDuration());  
}, 1);

setInterval(function() {
    // VOLUME CONTROLS
  $("#volume-amount").text("volume: " + player.getVolume() + "%");
  player.setVolume($("#volume-range").slider("value"));
}, 1);

function onPlayerReady(event) {
  // auto-play video
  event.target.playVideo();
}

$(document).ready(function() {
  // READY
}); 

Как всегда, спасибо за помощь!

  • 0
    Мне кажется, все в порядке ...
  • 0
    Да, я также просто отмахнулся от этого, и я не могу определить что-то, что кажется глючным или необычным.
Показать ещё 1 комментарий
Теги:
youtube

1 ответ

1
Лучший ответ

Вы пытаетесь обновить фреймы на каждом событии слайда (перегрузка)... просто сделайте это, когда слайд завершен. Документация YT Также установите для вашего диапазона значение true.

$("#range").slider({
  range: true,
  start: function(event, ui) { player.pauseVideo();},
  stop: function(event, ui) { player.seekTo(ui.value,true); player.playVideo(); }
});

Если вы хотите, чтобы видео обновлялось при перемещении ползунка, вы могли бы уменьшить некоторую нагрузку, запросив данные через определенные промежутки времени...

$("#range").slider({
  range: true,
  start: function(event, ui) { player.pauseVideo();},
  stop: function(event, ui) {player.playVideo(); },
  slide: function(event, ui) {
   if (ui.value % 5 == 0)
   {
     player.seekTo(ui.value,true);
   }
  }
});
  • 0
    codepen.io/mistkaes/pen/MwONzK?editors=001 Есть две ручки слайдера пользовательского интерфейса ...?
  • 0
    Это работает, но почему на слайдере пользовательского интерфейса есть два отдельных маркера пользовательского интерфейса? (Мне нужен только один)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню