【问题标题】:YouTube Frame API: Event Listeners only working for initial videoYouTube Frame API:事件监听器仅适用于初始视频
【发布时间】:2014-02-06 18:56:04
【问题描述】:

在使用 YouTube Frame API 时,我从 Google 文档中获取了示例代码,它会在 6 秒后暂停传递给 iframe 的视频:

var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {

      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });

  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }

这一切都很好而且很花哨,但是我在另一个以 iframe 为目标的 div 中加载了视频,并且它们不响应此事件侦听器(即它们在 6 秒后继续播放)。为什么是这样?它仍然不是同一个iframe吗?查看页面源代码时,id和name似乎签出。

编辑:刚刚注意到在运行 Inspect Element 时,iframe 没有改变,即源代码中的视频仍然与初始视频相同,而不是新加载的视频。一个线索,但我现在有点困惑。

【问题讨论】:

    标签: javascript iframe youtube-api youtube-iframe-api


    【解决方案1】:

    “播放器”是 iframe 的附加位置

    player = new YT.Player('player', {
    

    这样称呼它:

    video = document.getElementById('iFrameID'); //JQuery would be $("#iFrameID");
    player = new YT.Player(video, {
    

    如果您希望一次控制多个视频,则需要尝试使用多个 YT.Player 对象或运行,也许您可​​以使用类而不是 ID。

    【讨论】:

    • 谢谢你,但我走了一条不同的路,摆脱了 a href 目标的东西,只要有它,它就可以从图像缩略图中获取 YouTube id 并加载它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-09
    • 1970-01-01
    • 1970-01-01
    • 2018-01-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多