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设置为iframes 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，您可以将其作为参数传递给事件处理程序。

重新初始化youtube iframe api

1 个答案: