javascript - YouTube 嵌入视频在动态更新 iframe src 时停止播放

Question

我正在使用 iframe 标记在网页上加载一些视频。

<iframe id="player" type="text/html" width="640" height="280" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0">
</iframe>

最初，我提供了一个虚拟网址 -“https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1”作为 iframe 标记的 src 属性，我用它来嵌入 YouTube 视频。我通过创建两个单独的函数将视频加载和视频播放功能分开。这是因为我在单击链接时对视频进行排队，并且仅在启用某些设置时才播放它。

function playOnClick() {
  player.playVideo();                                                                                                                                                                            
}

function loadOnClick(videoId, videoURL) {

  // videoURL contains the url of video in the following format - https://www.youtube.com/watch?v=videoID

  /*
  videoURL = videoURL.replace(/watch\?v\=/, 'embed/');                                                                                                                                                     
  videoURL += '?enablejsapi=1';                                                                                                                                                                            
  jQuery('#player').attr('src', videoURL);                                                                                                                                                                 
  */

  player.cueVideoById(videoId);
}

上面的代码工作正常。但是，如果我取消注释动态更新 iframe src 属性的注释部分，则 src 会更新，视频也会排队，但无法播放。

此外，当我在没有虚拟 src 属性的情况下尝试上面的代码(取消注释部分的注释后)时，它会抛出这样的错误消息 -

Uncaught TypeError: Object # has no method 'loadVideoById'

我猜这可能是因为它无法识别enablejsapi设置为true。

更新 iframe 的 src 属性并使代码正常工作而不向 iframe 标记提供虚拟 src 的最佳方法是什么？

提前致谢!

Answer 1

这是预期的行为；如果您在 API 外部更改 iframe src，则会破坏 API 创建的绑定(bind)。解决此问题的最佳方法是根本不创建 iframe，而是让 API 为您完成此操作(您只需创建空标签，然后为每个 div 创建一个 YT.Player 对象...并且将注入(inject) DOM 节点您已经绑定(bind)到 iframe API。有关如何将空的 ID 传递给构造函数的示例，请参阅 https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player，然后始终使用 loadVideoById 来更改视频。

话虽如此，如果您更愿意手动创建 iframe，但是，如果您拥有的代码(已注释掉 jquery)有效，您可以这样做......是否有令人信服的理由jquery手动更改src属性(当cueVideoById已经以编程方式执行此操作时)？