YouTube API onPlayerReady永远不会被调用 [英] YouTube API onPlayerReady is Never Getting Called

问题描述

按照本教程，我一直在尝试将YouTube API集成到我的网站中.具体来说，当我按下按钮时，我想以全屏模式播放YouTube上托管的视频.不幸的是，我什至无法使该教程中给出的代码正常工作.

Follow this tutorial, I have been trying to integrate the YouTube API into my website. Specifically, when a button is pressed I want to play a video hosted on YouTube in fullscreen mode. Unfortunately, I can't even get the code given in that tutorial to work.

我正在使用Slim进行标记，因此我按照教程的建议添加了一个具有播放器ID的空div

I'm using Slim for markup so I added an empty div with the ID of player as the tutorial suggests

.body  
  .player

然后我在标记末尾添加了此javascript

I then added this javascript at the end of my markup

  $(document).ready(
    function() {
      loadYoutubeAPI();
    });

哪个应该开始调用这些函数?

Which should start the chain of calling these functions

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触发之前就停止了，我不知道为什么.

However, the chain of calls stops before onPlayerReady fires and I can't figure out why.

推荐答案

从我所看到的看来，您的问题似乎在播放器中div似乎属于类播放器，而从我所看到的教程，它正在查找具有玩家ID的div.所以类似以下的内容可能会起作用:

From what I can see, it seems as though your issue may be in the player div seems to be of the class player and from what I can see in the tutorial, its looking for an div with player id. so something like the following may work:

.body
    #player

我不是100％熟悉Slim，因此您可能需要用不同的方式来标明.

I am not 100% familiar with Slim so you may need to mark this up differently.

这篇关于YouTube API onPlayerReady永远不会被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！