javascript - player.stopVideo、player.playVideo 等在使用 youtube-api 进行事件函数调用之外无法工作

Question

我正在尝试创建一个按钮，允许用户单击它并停止嵌入的 YouTube 视频。但是，每当我尝试调用播放器对象本身来使用函数player.playVideo()时，我都会收到一条错误消息，指出该函数未定义。

播放器是在 Youtube API 加载时全局定义和设置的(就像他们网站上的教程一样)。当事件触发其使用时，对 playVideo 的函数调用工作得很好，但在这些之外使用它根本不起作用。

'''javascript
// 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);

var player;
function onYouTubeIframeAPIReady() {
    isReady=true;
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    playVideo();
}

var done = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}
function stopVideo() {
    player.pauseVideo();
}

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

//The function that is run when the button is pressed, only in this case                      
 // stopVideo not work!
function togglePlay() {
    if(isPlaying) {
        stopVideo();
    } else {
        playVideo();
    }
}
'''

预期:YouTube 视频播放 实际:错误player.playVideo不是函数

Answer 1

我解决了这个问题。即使设置带有 onclick 函数的按钮，在播放器完成加载之前使用播放器，也会发生一些奇怪的事情。为了解决这个问题，我将所有按钮声明和函数移至 onPlayerReady(event) 函数内，并使用 event.target.play 或 event.target.pause ，效果非常好。我的建议是在 onPlayerReady 中包含使用 youtube 播放器函数的任何按钮声明。