javascript - 重新初始化 youtube iframe api

Question

我正在使用 ajax(在模态/灯箱层中)添加我的 YouTube iframe。一次一个。由于我正在这样做(并且无法更改)，因此我无法在文档准备就绪时运行 youtube api。该脚本需要在 iframe 存在时附加并运行，以找到 iframe 的 ID。

第一个 iframe 一切正常。当使用 ajax 获取 iframe 时，我还附加了 javascript。

但是:当我关闭那个模态层时(我关闭它，我不删除它 - 出于性能原因)并打开另一个带有新视频的层我想再次运行 youtube 脚本。现在添加第二个 youtube api 脚本时它不起作用。

注意:当我关闭模式时，我会使用 API 暂停视频。这仅适用于第一个 iframe。

我该怎么办？是否有运行重新初始化 api 的函数？

---

感谢您尝试帮助 tsturzl，但那是行不通的。

我打开一个模式并使用 ajax 加载内容(包含 iframe 和其他元素)。然后我运行 youtube API 并将 ID 设置为 iframe ID。

当我关闭模式时，我运行 player.pauseVideo();并暂停视频。模式现在已隐藏(未删除，视频已暂停)，iframe 仍在 html 中，youtube api 的 ID“已保存”。

现在我想用另一个 youtube iframe 打开另一个模式(这个也加载了 ajax)。我再次运行 api 并尝试保存该 ID，以便在我关闭(隐藏)该模式时新视频暂停，但它不会工作。

知道怎么做吗？

注意:在这些模式中，视频显示在一个预览 div 中，用户可以隐藏/显示 iframe。当他们隐藏它时，视频应该暂停。隐藏 iframe 时，预览 div 中会显示一张图片。

Answer 1

好像没有，不过你可以自己重新初始化。看到你没有提供代码，我将引用文档中的代码here

要初始化你创建“var player;”这是您使用函数“onYouTubeIframeAPIReady()”创建实例的变量。也许您不会在每次创建模式时都重新创建 iframe。

您处理模态框的方式可能是将内容存储在 javascript 的字符串中。因此，每次您关闭它时，div 元素都会消失，因此 youtube API 可能会因为缺少您初始化它的元素而出错。

我的猜测是每次打开或关闭模式时都应该创建和删除 iframe(即“播放器”对象)。

不幸的是我不能确定，我没有代码片段作为基础。由于您提供的信息很少。

所以我想要的是这样的:

      var isReady=0;
      var player;
      function onYouTubeIframeAPIReady() {
        isReady=1;
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
      function onModalOpen(){
        if(isReady==1){
          player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'u1zgFlCw8Aw',
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
        }
      }
      function onModalClose(){
        player=null;
      }

当然，您需要为每个 iframe 创建一个“播放器”对象。您还需要为每个播放器对象调用 onModalOpen/Close，您可以将其作为参数传递给事件处理程序。