如何检测YouTube object标签首次播放并触发单次AJAX请求更新浏览量？

要实现这个需求，核心思路是利用YouTube Player API监听视频的播放事件，再通过一个状态标记来确保AJAX请求只在首次播放时触发。下面是具体的实现步骤和代码：

1. 给你的Object标签添加ID #

首先给嵌入的object标签加上一个唯一ID，方便后续JS获取元素：

<object id="youtube-player" data="http://www.youtube.com/embed/QwievZ1Tx-8" width="100%" height="315"></object>

2. 引入YouTube Player API并初始化播放器 #

我们需要加载YouTube的官方API来和嵌入的视频交互，然后初始化播放器实例：

// 初始化状态标记：记录是否已经触发过浏览量请求
let hasTriggeredView = false;

// 加载YouTube Player API
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 初始化播放器
let player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtube-player', {
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

3. 监听播放状态变化，触发AJAX请求 #

通过onStateChange事件监听视频状态，当视频切换到播放状态（状态码为YT.PlayerState.PLAYING）时，检查标记变量，只在首次播放时发送请求：

function onPlayerStateChange(event) {
  // 当视频开始播放时
  if (event.data === YT.PlayerState.PLAYING) {
    // 检查是否已经触发过请求
    if (!hasTriggeredView) {
      // 发送AJAX请求更新浏览量
      fetch('/your-update-view-url', {
        method: 'POST',
        // 根据你的需求添加请求头、请求体等
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ videoId: 'QwievZ1Tx-8' })
      })
      .then(response => response.json())
      .then(data => {
        console.log('浏览量更新成功:', data);
      })
      .catch(error => {
        console.error('更新失败:', error);
      });

      // 将标记设为true，后续播放不再触发请求
      hasTriggeredView = true;
    }
  }
}

关键逻辑说明 #

• hasTriggeredView变量：作为开关，首次播放后就会被设为true，后续无论暂停后再播放多少次，都不会再次执行AJAX请求。
• YT.PlayerState.PLAYING：YouTube API定义的播放状态码，确保我们只在视频真正开始播放时触发逻辑（避免缓冲、暂停等状态误触发）。
• 如果你习惯用XMLHttpRequest而不是fetch，可以把AJAX部分替换成对应的写法，逻辑是完全一致的。

内容的提问来源于stack exchange，提问作者Marcel Angir