Youtube iframe api 未触发 onYouTubeIframeAPIReady

2022-01-19 00:00:00 youtube youtube-api iframe jquery javascript

我已经与 youtube iframe api 斗争了很长一段时间了.不知何故，方法 onYouTubeIframeAPIReady 并不总是被触发.

I've been battling with the youtube iframe api for quite some time now. Somehow the method onYouTubeIframeAPIReady is not always triggered.

从症状来看，似乎是加载问题.检查器中没有显示错误.

From the symptoms it seems a loading problem. No errors are shown in the inspector.

这是我的代码:

<div id="player"></div>
          <script>
            videoId = 'someVideoId';
            var tag = document.createElement('script');
            tag.src = "//www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
          </script>

JS

(在页面末尾调用.我尝试将代码放在上面的脚本之后，结果是一样的.)

JS

(called at the end of the page. I tried to place the code right after the above script and the result was the same.)

var isReady = false
  , player
  , poster
  , video;

$(function () {
$('.js-play').click(function (e) {
    e.preventDefault();
    interval = setInterval(videoLoaded, 100);
  });
});
function onYouTubeIframeAPIReady() {
  console.log(videoId)
  player = new YT.Player('player', {
    height: '445',
    width: '810',
    videoId: videoId,
    events: {
      'onReady': onPlayerReady//,
      //'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  isReady = true;
  console.log("youtube says play")
}

function videoLoaded (){
  if (isReady) {
      console.log("ready and play")
      poster.hide();
      video.show();

      $('body').trigger('fluidvideos');

      player.playVideo();
      clearInterval(interval);
  } 
}

问题在于，有时 console.log 没有打印任何内容，也没有任何反应.

The problem is that sometimes nothing gets printed by the console.log and nothing happens.

在手机上，这种情况一直都在发生.有什么想法吗?

On mobile phones this happens all the time. Any ideas?

推荐答案

这不是超时问题，你应该不需要手动触发这个函数.

It is not a timeout issue, and you should not need to fire this function manually.

确保您的 onYouTubeIframeAPIReady 函数在全局级别可用，而不是嵌套(隐藏)在另一个函数中.

Make sure your onYouTubeIframeAPIReady function is available at the global level, not nested (hidden away) within another function.

相关文章