2

我正在使用 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 中会显示一个图像。

4

1 回答 1

0

似乎没有,但是您可以自己重新初始化它。看到您没有提供代码,我将在此处参考文档上的代码

初始化你创建“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,您可以将其作为参数传递给事件处理程序。

于 2012-09-27T14:45:01.177 回答