延迟加载vimeo视频

Question

我正尝试延迟加载vimeo视频，但出现了一些问题。这是我的代码：

<style>
  .content-block {
    width: 200px;
    height: 3000px;
    background-color: red;
  }
</style>

<div class="content-block"></div>

<iframe class="lazyload" data-src="https://player.vimeo.com/video/76979871?autoplay=1&muted=1" width="640" height="360" frameborder="0" webkitallowfullscreen
  mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.5/lazysizes-umd.min.js"></script>
<script>
  var iframe = document.querySelector('iframe');

  function handleLazyLoad() {
    if (iframe.classList.contains('lazyload')) {
      const storeSRC = iframe.dataset.src;

      iframe.addEventListener('lazyloaded', () => {
        delete iframe.dataset.src;
        iframe.src = storeSRC;
        initPlayer();
      });
    } 
  }

  function initPlayer() {
    var player = new Vimeo.Player(iframe);
    player.ready().then(function (){
      console.log('player is ready!');

      // These events are not attaching? Why?
      player.on('play', function () {
        console.log('played the video!');
      });

      player.on('ended', function () {
        console.log('the video has ended');
      });
    });
  } 

  handleLazyLoad();

</script>

我正在使用一个称为“惰性大小”的脚本来延迟加载docs中指定的iframe

https://github.com/aFarkas/lazysizes

视频延迟加载后，我将按照他们在文档中指定的方式启动vimeo播放器

https://github.com/vimeo/player.js/

一切正常，但我无法将vimeo事件处理程序附加到新的vimeo播放器上？

但是奇怪的是，如果我在尝试附加事件处理程序之前添加settimeout呢？

<style>
  .content-block {
    width: 200px;
    height: 3000px;
    background-color: green;
  }
</style>

<div class="content-block"></div>

<iframe class="lazyload" data-src="https://player.vimeo.com/video/76979871?autoplay=1&muted=1" width="640" height="360" frameborder="0" webkitallowfullscreen
  mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.5/lazysizes-umd.min.js"></script>
<script>
  var iframe = document.querySelector('iframe');

  function handleLazyLoad() {
    if (iframe.classList.contains('lazyload')) {
      const storeSRC = iframe.dataset.src;

      iframe.addEventListener('lazyloaded', () => {
        delete iframe.dataset.src;
        iframe.src = storeSRC;
        initPlayer();
      });
    } 
  }

  function initPlayer() {
    var player = new Vimeo.Player(iframe);
    player.ready().then(function (){
      console.log('player is ready!');

      setTimeout(function() {
        // Now these events attach as I would like them to ?
        player.on('play', function () {
          console.log('played the video!');
        });

        player.on('ended', function () {
          console.log('the video has ended');
        });
      }, 1000);
    });
  } 

  handleLazyLoad();

</script>

理想情况下，我不想使用超时。我曾希望添加.ready().then()承诺可以确保在尝试附加处理程序之前视频已准备就绪。

我这里缺少什么吗？

任何帮助表示赞赏！谢谢！