javascript - Youtube Iframe Api无法加载视频

Question

我有一个页面，该页面最初具有一个空的div，单击按钮时，它将打开一个youtube视频。

HTML:

<script src="public/js/yt-player.js" async="true"></script>
<div class="bgCover">&nbsp;</div>
    <div class="overlayBox">
        <div class="overlayContent">
            <div class="player"></div>
        </div>
    </div>

JS(在外部文件中):

$(document).ready(function() {

var isOpen = false;

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;


window.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('player', {
        height: '480',
        width: '800',
        videoId: '8hP9D6kZseM',
        events: {
            'onReady': onPlayerReady
        }

    });
}

function onPlayerReady() {
    // Never get here
    console.log(player);
}


function stopVideo() {
    player.stopVideo();
    player.clearVideo();
}

function doOverlayOpen() {
    // ...
    player.playVideo();
}

function doOverlayClose() {
    // ...
    player.stopVideo();
}

$('a.launchLink').click(doOverlayOpen);

在“测试”环境中尝试代码时(因此只需按钮即可测试: http://jsfiddle.net/Te74S/)，它可以完美运行。

但是在生产环境中，我加载了许多js文件，似乎从未调用过onPlayerReady函数。

因此，我遇到了有关playVideo和stopVideo函数的错误，例如“Uncaught TypeError:undefined is not a function”。关于问题的根源有什么想法吗？

谢谢

Answer 1

<div class="player"></div>

应该

<div id="player"></div>

播放器的目标是ID，而不是类(class)。