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属性时，它会抛出一条错误消息 -

未捕获的TypeError：对象＃没有方法'loadVideoById'

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

更新iframe的src属性有什么最好的，并且在不向iframe标记提供虚拟src的情况下使代码工作？

提前致谢！

Answer 1

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

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

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

1 个答案: