如何在无API情况下检测嵌入Iframe的YouTube视频播放结束？
2026-5-15
检测嵌入YouTube视频播放完毕的实现方案
要搞定这个需求，得用到YouTube官方的Iframe Player API，这是最稳定可靠的方式，我给你一步步说清楚怎么做：
第一步：修改iframe的src，启用JS API支持
你原来的PHP输出代码里，iframe的src需要加上?enablejsapi=1参数，这样YouTube才允许JavaScript控制这个播放器。修改后的代码如下：
echo "<iframe width='50%' height='60%' id='cc' src='https://www.youtube.com/embed/" . $data_song[0] . "?enablejsapi=1' frameborder='1' allowfullscreen></iframe><br>";
如果之后需要加其他参数（比如自动播放、隐藏控制栏），用&连接就行，比如?enablejsapi=1&autoplay=1&controls=0。
第二步：加载YouTube Iframe API脚本
在你的页面中（推荐放在<body>标签末尾，不阻塞页面加载）添加这个脚本，用来加载官方的API：
<script src="https://www.youtube.com/iframe_api"></script>
第三步：编写JS代码监听播放结束事件
YouTube API加载完成后，会自动调用名为onYouTubeIframeAPIReady的函数，我们就在这个函数里初始化播放器并绑定状态监听事件：
let player; // API加载完成后自动触发这个函数 function onYouTubeIframeAPIReady() { // 通过你给iframe设置的id（cc）初始化播放器实例 player = new YT.Player('cc', { events: { // 监听播放器状态变化 'onStateChange': handlePlayerStateChange } }); } // 状态变化时触发的回调函数 function handlePlayerStateChange(event) { // YT.PlayerState.ENDED 对应的数值是0，代表视频播放完毕 if (event.data === YT.PlayerState.ENDED) { // 这里写视频播放完成后你要执行的逻辑，比如： alert('视频已经播放完啦！'); // 示例：如果要通知后端，可以用fetch发送请求 // fetch('/your-backend-endpoint', { // method: 'POST', // headers: { 'Content-Type': 'application/json' }, // body: JSON.stringify({ videoId: '" . $data_song[0] . "' }) // }); } }
一些注意事项
- 函数名
onYouTubeIframeAPIReady不能随便改，这是API约定好的触发函数，改了就没法正常初始化了。 - 不需要额外申请YouTube API密钥，只要启用了
enablejsapi=1参数，监听状态变化这种基础功能就能正常使用。 - 如果你的页面是通过AJAX动态加载这个iframe的，那需要手动调用初始化逻辑，而不是依赖自动触发的函数，但你现在是PHP直接输出的，所以不用操心这个。
内容的提问来源于stack exchange，提问作者Adam Šulc
