javascript - 替换 youtube iframe src 会破坏自动播放

Question

我在模式中有 youtube 视频 iframe，需要在模式打开时自动播放，因此当模式打开时，我使用 ?autoplay 将 iframe 的 src 设置为视频的嵌入 URL =1。这对于第一个视频效果很好，任何其他视频都不会自动播放。视频加载良好，我可以播放它们。他们只是不尊重自动播放选项。

这是我用来替换 iframe 的 src 的代码:

$modalVideoPreviewIframe.attr('src', sessionPreviewVideoId && `https://www.youtube.com/embed/${sessionPreviewVideoId}?autoplay=1`);

我还尝试使用 jquery 的 clone 和 replaceWith 在设置其 src 之前用新元素替换 iframe:

const $modalVideoPreviewIframeClone = $modalVideoPreviewIframe.attr('src', 'about:blank').clone();
$modalVideoPreviewIframe.replaceWith($modalVideoPreviewIframeClone);
$modalVideoPreviewIframe = $modalVideoPreviewIframeClone;
$modalVideoPreviewIframe.attr('src', sessionPreviewVideoId && `https://www.youtube.com/embed/${sessionPreviewVideoId}?autoplay=1`);

Answer 1

我最终使用了 YouTube iframe SDK :

$('#session-modal-video').replaceWith('<div id="session-modal-video"></div>');
const player = new YT.Player('session-modal-video', {
  height: '390',
  width: '640',
  videoId: sessionPreviewVideoId,
  events: {
    'onReady'() {
      if(autoplay) {
        player.playVideo();
      }
    },
    'onError'(error) {
      console.log('Failed to create Youtube video player', error)
    }
  }
});