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 播放器功能的按钮声明。

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

player.stopVideo, player.playVideo, etc. not working outside of event functions calls with youtube-api

html

javascript

iframe

youtube-api

youtube-iframe-api