如何触发YouTube视频事件？Chrome/Edge下视频结束事件无响应

问题描述 #

我在Google Chrome和Edge浏览器中遇到了YouTube视频结束事件无法触发的问题，已使用YouTube iFrame API编写代码，但该事件仅在Safari浏览器中正常工作。

现有代码 #

HTML

<iframe id="player" type="text/html" width="640" height="390"
        src="https://www.youtube.com/embed/xPxk0zvqes4? enablejsapi=1&origin=https://mishparking.com"
        frameborder="0"></iframe>

JavaScript

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() {
    player = new YT.Player('player', {
        playerVars: {
            'playsinline': 1
         },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

function onPlayerStateChange(event) {
    if(event.data == YT.PlayerState.ENDED) {
        alert("Video has ended.");
    }
}

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

解决方案 #

1. 修复URL参数空格问题 #

你的iframe地址中enablejsapi=1后面多了一个空格，Chrome/Edge对URL格式更严格，会导致API无法正确识别授权源，进而阻止事件传递。修改为：

<iframe id="player" type="text/html" width="640" height="390"
        src="https://www.youtube.com/embed/xPxk0zvqes4?enablejsapi=1&origin=https://mishparking.com"
        frameborder="0"></iframe>

2. 补充iframe必要权限 #

添加allow属性，确保浏览器允许iframe的媒体操作和跨域通信：

<iframe id="player" type="text/html" width="640" height="390"
        src="https://www.youtube.com/embed/xPxk0zvqes4?enablejsapi=1&origin=https://mishparking.com"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>

3. 绕过自动播放限制 #

Chrome/Edge的自动播放政策会阻止无交互的自动播放，导致视频无法启动，自然不会触发结束事件。可以选择以下两种方案：

方案A：添加静音参数

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        playerVars: {
            'playsinline': 1,
            'mute': 1 // 静音后可绕过自动播放限制
         },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

方案B：用户交互触发播放

<!-- 先在HTML中添加播放按钮 -->
<button id="play-btn">播放视频</button>

// 修改onPlayerReady函数
function onPlayerReady(event) {
    document.getElementById('play-btn').addEventListener('click', function() {
        event.target.playVideo();
    });
}

4. 检查浏览器隐私设置 #

临时关闭Chrome/Edge的第三方Cookie阻止、跟踪保护等功能测试，这些设置可能会干扰YouTube iframe的跨域事件传递。

内容的提问来源于stack exchange，提问作者Floyd Resler