Youtube Iframe API reports "Uncaught TypeError: Cannot read property 'endSeconds' of null" every time when loading specific videos

Question

问题描述

使用 Youtube Iframe API 根据用户操作将视频动态加载到页面中，大多数情况下效果很好。但是某些视频总是产生这个错误：

Uncaught TypeError: Cannot read property 'endSeconds' of null
    at Wh (www-embed-player.js:575)
    at ji.n.na (www-embed-player.js:611)
    at ji.n.Oa (www-embed-player.js:600)
    at m (www-embed-player.js:596)

重现步骤

转到https://www.rockthebells.com/pages/the-tube
打开你的控制台
单击下面网格中的任何视频以加载并启动
请注意，大多数工作正常！
将排序更改为"Title A-Z"，转到第二页，然后单击"BIG PIMPIN' - JAY-Z FT. UGK"
请注意，控制台中显示上述错误并且视频无法加载
前往 Youtube，观看任何视频，然后将 url 中的视频 ID 替换为上一个站点中点击项目的视频 ID。请注意，它工作正常。

相关代码

在页面中HEAD

<script defer="defer" src="https://www.youtube.com/iframe_api"></script>

在application.js

window.onYouTubeIframeAPIReady = function() {
  console.log('onYouTubeIframeAPIReady');

  $(function() {
    $("[data-video-select-container]").each(function() {
      const container = $(this);
      const iframeTarget = container.find('[data-video-select-target]');
      const iframeTargetId = iframeTarget.attr('id');
      const defaultVideoId = iframeTarget.data('default-video-id');
      const titleEl = container.find('[data-video-select-title]');
      const artistEl = container.find('[data-video-select-artist]');
      const buttons = container.find('[data-video-select-video]');
      let player;

      console.log('data-video-select-container', {
        container, iframeTarget, iframeTargetId, titleEl, artistEl, buttons
      });

      function onPlayerReady() {
        console.log('onPlayerReady');

        buttons.click(function(){
          const btn = $(this);
          const video = btn.data('video-select-video');
          console.log('video btn click', { video });

          player.loadVideoById(video.id);
          artistEl.text(video.artist);
          titleEl.text(video.title);
        });
      }

      function onPlayerStateChange() {}

      function startPlayer(videoId) {
        player = new YT.Player(iframeTargetId, {
          height: '100%',
          width: '100%',
          videoId: videoId,
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      if (defaultVideoId) {
        startPlayer(defaultVideoId);
      } else {
        const firstBtn = buttons.first();
        const firstVideo = firstBtn.data('video-select-video');
        artistEl.text(firstVideo.description);
        titleEl.text(firstVideo.title);
        startPlayer(firstVideo.id);
      }
    });
  });
}

其他注意事项

我已经进行了大量搜索，但找不到类似的已发布问题，但如果我错过了，我深表歉意。

我的猜测是，我试图加载的视频被 Youtube 或视频作者特别禁止通过 IFrame API 加载。但是错误并不表示。

Answer 1

我注意到其他一些使用参数语法的播放器方法也有同样的错误。解决方案是使用对象参数的方法替代方法。

youtubePlayer.loadById({
  videoId: videoId,
  startSeconds: 0,
  endSeconds: 180
});

startSeconds 和 endSeconds 字段都是可选的。

Youtube Iframe API reports "Uncaught TypeError: Cannot read property 'endSeconds' of null" every time when loading specific videos

Youtube Iframe API reports "Uncaught TypeError: Cannot read property 'endSeconds' of null" every time when loading specific videos

html

javascript

runtime-error

youtube-iframe-api