Question

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

Player是全局定义的，并在加载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调用

1 个答案: