嵌套函数在 JavaScript (YouTube API) 中不起作用答案

【问题标题】：Nested Function not working in JavaScript (YouTube API)嵌套函数在 JavaScript (YouTube API) 中不起作用
【发布时间】：2015-10-24 19:18:08
【问题描述】：

我需要在单击启动按钮时显示一个视频，当视频结束时它应该重定向到一个站点。问题是，视频正在播放 onLoad。只有在单击按钮时，我才能播放它。

这是我的代码：

HTML

<a onClick="myvideo()" class="waves-effect waves-light btn-large big"><i class="material-icons right">cloud</i>LAUNCH</a>

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

<script src="http://www.youtube.com/player_api"></script>

function mySite() {
    window.open('http://www.spark2k15.com','_self');
}


// create youtube player
var player;
function myvideo() {
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'xgRbxO94GRQ',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
       event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {          
            // alert('done');
            mySite();
        }
    }
}

【问题讨论】：

也许您不想这样做 // autoplay video 您创建的东西？这段代码是你自己写的吗？

标签： javascript html youtube-api

【解决方案1】：

根据您的代码，不应播放视频，因为 onYouTubePlayerAPIReady 似乎没有公开供 API 调用。

你应该做的是：

移除myvideo功能块。
将onYouTubePlayerAPIReady改成addEventListener改成<a>，并在handler中创建播放器。

工作的jsfiddle。

修复 HTML

<a id="clickPlay" href="#" class="waves-effect waves-light btn-large big"><i class="material-icons right">cloud</i>LAUNCH</a>

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

<script src="http://www.youtube.com/player_api"></script>
// Shouldn't the api be this line? 
// Also, make sure that your function exposed for the api should be declared before api loaded.
<script src="https://www.youtube.com/iframe_api"></script>

JS：

function mySite() {
    window.open('http://www.spark2k15.com','_self');
}

// create youtube player
var player;
function onYouTubePlayerAPIReady() {
    var anchor = document.getElementById('clickPlay');
    // Only when the anchor is clicked, we create the video.
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
            player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'xgRbxO94GRQ',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    });
}

// autoplay video
function onPlayerReady(event) {
    event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {        
    if(event.data === 0) {          
        // alert('done');
        mySite();
    }
}

【讨论】：