javascript - 在后台自动播放嵌入的 YouTube 视频？

Question

我有一个嵌入 YouTube 视频的网站。我正在使用 YouTube 播放器 API 嵌入我的视频，并且播放器设置为在页面加载时自动播放。我设置了一个监听事件，以便在当前嵌入视频播放完毕后重定向到下一个视频(我需要重定向到新的物理页面，而不是将下一个视频加载到 API 创建的现有 iframe 中，因为每个页面都包含信息/特定于该视频的评论)。

这一切都可以完美运行，但前提是您打开了选项卡。如果您在后台收听视频(它们只是设置为静态图像的录音，没有什么可实际观看的)，则页面将在当前视频结束后正常重定向，但 YouTube 视频将不会开始播放直到您单击进入选项卡。一旦您单击该选项卡，就会开始自动播放并开始视频。但我需要无论选项卡是否打开，视频都能自动播放。有什么想法吗？

我已经尝试过 JWplayer，重定向/自动播放效果非常好，但这意味着必须自己托管视频，而我宁愿在 YouTube 上托管。我还注意到 YouTube.com 没有这个问题。无论选项卡是否打开，它将加载播放列表中的下一个视频页面并自动播放。

此问题仅出现在 Chrome、Firefox 和 Opera 中，而不会出现在 Edge 或 IE 中。

谢谢。

<div id="yt-player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>

// create youtube player
var player;
function onYouTubePlayerAPIReady(){
    player = new YT.Player('yt-player',{
        height:'433',
        width:'770',
        videoId:'xxxxxxxxxxx',
        playerVars: { 'autoplay': 1, 'controls': 1, 'html5': 1 },
        events:{
            'onReady':onPlayerReady,
            'onStateChange':onPlayerStateChange
        }
    });
}

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

// when video ends
function onPlayerStateChange(event) {
    if(event.data === 0 && $("#autoplayCB").is(':checked')) {  
        window.location="/nextvideo.htm";
    }
}

</script>

Answer 1

我也遇到过这个问题。我发现您必须先创建播放器，然后才能使用 loadVideoById 更改视频。

https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions

这里的问题是，您必须自己制作视频列表，或者找到某种方法将视频列表放入 JavaScript 数组中，并在当前视频结束时调用下一个视频。您将需要建立一个手动播放列表。

唯一需要注意的是，您必须在第一次访问页面时加载视频，在新选项卡中打开视频而不给予选项卡焦点将阻止视频初始化，直到您这样做。