YouTube API onPlayerReady永远不会被调用

YouTube API onPlayerReady is Never Getting Called

本文关键字：调用 永远 API onPlayerReady YouTube      更新时间：2023-09-26

遵循本教程，我一直在尝试将YouTube API集成到我的网站。具体来说，当按下按钮时，我想以全屏模式播放YouTube上的视频。不幸的是，我甚至不能让教程中给出的代码工作。

我使用Slim标记，所以我添加了一个空的div与播放器的ID作为教程建议

.body  
  .player

然后我在我的标记

的末尾添加了这个javascript
  $(document).ready(
    function() {
      loadYoutubeAPI();
    });

应该开始调用这些函数的链

function loadYoutubeAPI() {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
        }
    });
}
function onPlayerReady(event) {
    event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}
function stopVideo() {
    player.stopVideo();
}

然而，调用链在onPlayerReady触发之前停止，我不知道为什么。

从我所看到的，似乎你的问题可能是在玩家div似乎是类玩家，从我可以看到在教程中，它寻找一个div与玩家id。因此，像下面这样的内容可能会起作用:

.body
    #player

我对Slim不是很熟悉，所以你可能需要用不同的方式标记。

相关文章：