预加载youtube嵌入

4 回答

• 3

  我有同样的问题，并遇到了这个问题 . 经过一些研究，我认为我发现了一个更清洁，尽管相似的答案 .

  当JavaScript API调用 OnYouTubePlayerReady 时，您按下播放并向 onStateChange 添加一个事件侦听器，每次播放器从缓冲更改为播放时都会调用该事件侦听器 .

  例如，在您正在侦听状态3的函数内部，即缓冲状态，并且一旦调用它，您就会暂停视频 .

  您可以在this jsFiddle中看到此技术的实际应用 .

  旁注：我在我的示例中没有使用JavaScript框架，但您可以轻松地在此处放置一个 .

  此外，我无法使用jsFiddle从HTML主体中抽象脚本标记，但外部 script.js 文件在我自己的服务器上工作正常 .

  回复于 2024-05-03T20:48:05+08:00
• 0

  我一直在寻找这个问题的解决方案并遇到了这篇文章：

  Embed YouTube Videos Responsively without Increasing Load Time

  摘要说明：此方法会将您的网页大小减少300-400 KB，同时使您的网站对移动设备友好 .

  Paste this on the page ：

  <div class="youtube-container">
  <div class="youtube-player" data-id="VIDEOID"></div>
  </div>
  

  The javascript ：

  <script>
  (function() {
      var v = document.getElementsByClassName("youtube-player");
      for (var n = 0; n < v.length; n++) {
          var p = document.createElement("div");
          p.innerHTML = labnolThumb(v[n].dataset.id);
          p.onclick = labnolIframe;
          v[n].appendChild(p);
      }
  })();
  
  function labnolThumb(id) {
      return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
  }
  
  function labnolIframe() {
      var iframe = document.createElement("iframe");
      iframe.setAttribute("src", "//www.youtube.com/embed/" +
          this.parentNode.dataset.id + "?  autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("id", "youtube-iframe");
      this.parentNode.replaceChild(iframe, this);
  }
  </script>
  

  The CSS ：

  <style>
  .youtube-container {
      display: block;
      margin: 20px auto;
      width: 100%;
      max-width: 600px;
  }
  .youtube-player {
      display: block;
      width: 100%;
      /* assuming that the video has a 16:9 ratio */
  
      padding-bottom: 56.25%;
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 100%;
      cursor: hand;
      cursor: pointer;
      display: block;
  }
  img.youtube-thumb {
      bottom: 0;
      display: block;
      left: 0;
      margin: auto;
      max-width: 100%;
      width: 100%;
      position: absolute;
      right: 0;
      top: 0;
      height: auto
  }
  div.play-button {
      height: 72px;
      width: 72px;
      left: 50%;
      top: 50%;
      margin-left: -36px;
      margin-top: -36px;
      position: absolute;
      background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
  }
  #youtube-iframe {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  </style>
  

  有关其他修改建议和改进，请参阅原始文章注释 .

  回复于 2024-05-03T20:48:05+08:00
• 0

  如果我们这样看：https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

  预加载iframe可能会有所帮助：

  <link rel="preload" href="https://www.youtube.com/embed/dQw4w9WgXcQ" as="document">
  

  回复于 2024-05-03T20:48:05+08:00
• -1

  呼叫

  player.cueVideoById(videoId:String);
  

  代替

  player.loadVideoById(videoId:String);
  

  回复于 2024-05-03T20:48:05+08:00