如何通过YouTube API检测iframe视频播放结束？

嘿，很高兴你已经成功通过YouTube Data API获取到视频时长了！要实现检测iframe内视频播放结束的功能，核心得用到YouTube IFrame Player API——这是官方提供的专门用于和嵌入视频交互的工具，下面给你一步步拆解实现思路和代码示例：

核心思路 #

YouTube IFrame Player API允许你直接与嵌入的视频播放器交互，其中最关键的就是监听播放器的状态变化事件，当视频播放结束时，播放器会触发特定的状态码，我们只需要捕获这个状态即可。

具体实现步骤 #

1. 加载YouTube IFrame Player API脚本 #

首先在你的页面中引入API脚本，确保它能在播放器初始化前加载完成：

<script src="https://www.youtube.com/iframe_api"></script>

2. 创建播放器容器并初始化播放器 #

不要直接写静态的<iframe>标签，而是通过API动态创建播放器，这样才能绑定事件监听。先在页面里加一个容器：

<div id="player"></div>

然后用JavaScript初始化播放器，这里可以结合你后端获取到的视频ID（也就是你代码里的$video_id['v']）：

let player;

function onYouTubeIframeAPIReady() {
  // 这里的VIDEO_ID替换成你从后端拿到的视频ID
  player = new YT.Player('player', {
    videoId: '<?php echo $video_id['v']; ?>',
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

3. 监听播放状态变化事件 #

定义onPlayerStateChange函数，当播放器状态变为0时，就代表视频播放结束了（YouTube播放器状态码：0=结束，1=播放中，2=暂停，3=缓冲中，5=视频已就绪）：

function onPlayerStateChange(event) {
  if (event.data === 0) {
    // 这里写视频播放结束后的逻辑，比如弹窗提示、发送请求到后端等
    console.log('视频播放结束啦！');
    // 如果你需要用到之前获取的时长，也可以把后端拿到的$vTime传到前端来用
    // 比如：alert(`总时长：<?php echo $vTime; ?>，已播放完毕`);
  }
}

4. （可选）结合你已有的时长数据 #

你之前通过Data API拿到的视频时长$vTime（比如PT1M30S这种ISO格式），可以在前端转换成更易读的格式，或者和播放器的当前播放时间做对比，不过其实通过状态码检测结束是最可靠的，不需要自己计算时长对比。

注意事项 #

• 确保onYouTubeIframeAPIReady函数是全局作用域的，API加载完成后会自动调用这个函数
• 如果你的页面是动态渲染的，要保证播放器容器在初始化前已经存在于DOM中
• 如果你需要多个视频播放器，可以创建多个YT.Player实例，分别绑定事件监听

内容的提问来源于stack exchange，提问作者Adam Šulc