Question

我有这个自定义视频时间用户界面滑块，可以在刷新时更改YouTube视频的时间。我的问题是，当用户移动滑块时视频正在尝试加载时，会导致手柄抖动并翻转。我试图找出的是，如果我可以做到这一点，当用户移动手柄时它不会尝试加载视频，而只是一旦他们将鼠标放在滑块上就会更新。 / p>

DEMO： http://codepen.io/mistkaes/pen/RPGzbX?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 - （小时* 3600） - （分钟* 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",
  slide: function(event, ui) {player.seekTo(ui.value);}
});

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

一如既往，感谢您的帮助！

Answer 1

您可以使用3个事件：
- 开始（开始 - 滑动） - ＆gt;停止播放器
- 结束（结束滑动） - ＆gt;启动播放器
- 滑动（滑动） - ＆gt;移动玩家位置

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

演示：http://codepen.io/anon/pen/EjwMGV

Answer 2

尝试添加一个return：false;在幻灯片功能上。像这样：

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

检测何时移动jQuery UI滑块？

2 个答案: