动态更改 YouTube“控制”playervars

Question

我正在开发一个播放器，它在加载时会寻找指定的时间并开始循环播放视频的一小部分。首先，这将用作背景，但是，有一个带有样式播放按钮的覆盖层，可以提供视频详细信息。单击该按钮后，视频将重置为开始、取消静音和播放。我一切正常，除了当视频重置时它会中断 onPlayerStateChange 事件，这意味着视频不会检测到结束并重置其循环。我相信这取决于我如何通过访问 src 属性并将“controls=0”更改为“controls=1”来更改playerVars。是否有更正确的方法来更改这些属性，而不会破坏玩家事件？我在这里设置了一个小提琴：https ://jsfiddle.net/BearSkull/uqje4793/

  //This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

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

//This function creates an <iframe> (and YouTube player)
//after the API code downloads.
var youTubeId = '-hTVNidxg2s';
var startTime = 85; //start time in seconds
var stopTime = 95; //end time in seconds
var playInterval = (stopTime - startTime) * 1000; //converts to milliseconds
var ratio = 16 / 9; //YT player ratio
var playerWidth = jQuery(window).width();
var playerHeight = Math.ceil(playerWidth / ratio);
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtube-player', {
  height: playerHeight,
  width: playerWidth,
  videoId: youTubeId,
  playerVars: {
    'controls': 0,
    'showinfo': 0
  },
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
    }
  });
}

var intervalCallbackId

var loopFunction = function() {
  intervalCallbackId = setInterval(playerSeek, playInterval);
};

function playerSeek() {
  player.seekTo(startTime);
};

//The API will call this function when the video player is ready.

var started = false;

function onPlayerReady(event) {
  jQuery('.hero-background-image').delay(1500).fadeOut(1000);
  if (started === false) {
    player.seekTo(startTime).mute().playVideo();
    loopFunction(event);
    started = true;
  } else {
    player.seekTo(0).unMute().setVolume(100).playVideo();
  }
}

//Play Button Click Function

jQuery(".desktop-play-btn").on('click', function() {
  var src = jQuery('#youtube-player').attr('src');
  jQuery('#youtube-player').attr('src', src.replace("controls=0", "controls=1"));
  clearInterval(intervalCallbackId);
  jQuery('#player-overlay').fadeOut(1000);
  jQuery('#hero-youtube-video, #youtube-player').css({
    'z-index': '99'
  });
  player.seekTo(0).unMute().setVolume(100).playVideo();
});

//The API calls this function when the player's state changes.

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    player.seekTo(startTime).mute().playVideo();
    loopFunction(event);
  }
}