从 iframe API 延迟加载 youtube 视频

Question

我想使用 iframe API 延迟加载 youtube 视频。IE。一开始只加载海报图片，当用户点击它时，只加载实际图片及其内容。

Answer 1

大部分内容取自youtube 页面上的入门部分。

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

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

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 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();
      }
    </script>

此示例在准备好时加载视频。

因此，我们对其进行了一些更改以添加占位符图像，然后单击隐藏图像并播放视频。

将标签（步骤 2）包裹在函数中

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

添加图像检查此问题以获取有关尺寸的更多详细信息。

<div id="placeholder">
    <img src="http://img.youtube.com/vi/M7lc1UVf-VE/sddefault.jpg" />
</div>

然后单击隐藏占位符图像并加载播放器

document.getElementById("placeholder").addEventListener("click", function(){
    this.style.display = 'none';
    loadYT()
});

最终结果如下所示。

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

Answer 2

为什么要在点击时加载视频，而不是在用户看到视频时才加载？使用jQuery.Lazy，你就没有什么可做的了。:)

将插件添加到您的页面：（您还需要 jQuery 或 Zepto）

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.1/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.1/plugins/jquery.lazy.youtube.min.js"></script>

准备你的 iFrame：（注意data-loader和data-src属性）

<iframe data-loader="youtube" data-src="1AYGnw6MwFM" width="560" height="315"></iframe>

并开始使用 Lazy：

$(function() {
    $("iframe[data-src]").Lazy();
});

就是这样！每当用户通过滚动到达 iFrame 时，它​​们就会被加载。更多信息请参见此处。

Answer 3

<iframe loading="lazy"

iframe此 HTML 功能仅当用户滚动时才允许延迟加载 YouTube嵌入内容，而无需任何额外的 JavaScript（YouTube 视频当然是通过 JavaScript 自动加载的iframe）。

这是一个有效的 jsfiddle：https://jsfiddle.net/cirosantilli/3p0tk5nc/1/，我已经在 Chromium 81 上进行了测试。您可以在开发人员工具“网络”选项卡上看到，框架仅在您滚动到框架上时才加载。

由于某种原因，它不适用于 Stack Overflow 片段，因为 YouTube 视频通常不适用于 Stack Overflow，而不是因为loading="lazy"特殊原因。

更多详细信息请参见：lazy load iframe (delay src http call) with jquery

Answer 4

终于成功了，下面的代码是 AngularJS 中的。

超文本标记语言

<div data-ng-repeat="video in videoIds track by $index">
    <div id="uniQueId" ng-click="playVideo(video, 'player' + $index)">
        <div class="video-play-button"></div>
    </div>
</div>

JS

 $scope.playVideo = function(videoId, id) {
        $scope.players[id] = new YT.Player(id, {
            videoId: videoId,
            width: '400',
            height: '300',
            playerVars: { 'autoplay': 1 },
            events: {
                'onStateChange': $scope.onPlayerStateChange
            }
        });
    };