嵌套函数在 JavaScript 中不起作用（YouTube API）

Question

我需要在单击“启动”按钮时显示一个视频，并且在视频结束时它应该重定向到一个站点。问题是，视频正在播放 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>

JS

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();
        }
    }
}

Answer 1

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

你应该做的是：

删除myvideo功能块。
将onYouTubePlayerAPIReady更改为addEventListener再更改为<a>，并在处理程序中创建播放器。

正在工作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();
    }
}

嵌套函数在 JavaScript 中不起作用（YouTube API）

Nested Function not working in JavaScript (YouTube API)

html

javascript

youtube-api