YouTube 嵌入式视频在动态更新 iframe src 时停止播放答案

【问题标题】：YouTube embedded video stops playing on dynamically updating the iframe srcYouTube 嵌入式视频在动态更新 iframe src 时停止播放
【发布时间】：2014-12-08 01:16:57
【问题描述】：

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

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

最初，我提供了一个虚拟 url -“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 的情况下使代码工作的最佳方法是什么？

提前致谢！

【问题讨论】：

标签： javascript jquery youtube youtube-api youtube-javascript-api

【解决方案1】：

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

话虽如此，如果您宁愿手动创建 iframe，但如果您拥有的代码（带有 jquery 注释）有效，您可以继续使用...是否有令人信服的理由jquery 手动更改 src 属性（当 cueVideoById 已经以编程方式进行时）？

【讨论】：