无需YouTube API获取InfinityFree嵌入视频的时长与播放进度

方法1：使用YouTube IFrame Player API（推荐） #

这个API是前端层面的交互方案，不需要后端调用YouTube的数据API，因此不会受到InfinityFree的屏蔽限制。核心逻辑是通过加载官方播放器脚本，直接与嵌入的iframe进行通信。

实现步骤与代码示例： #

<!-- 嵌入YouTube视频iframe，必须添加enablejsapi=1参数开启JS交互支持 -->
<iframe id="yt-player" width="640" height="360" src="https://www.youtube.com/embed/你的视频ID?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

<script>
  // 动态加载YouTube Player API脚本
  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('yt-player', {
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  function onPlayerReady(event) {
    // 获取视频总时长（单位：秒）
    var totalDuration = player.getDuration();
    console.log('视频总时长：', totalDuration);

    // 每秒获取一次当前播放进度
    setInterval(() => {
      var currentProgress = player.getCurrentTime();
      console.log('当前播放进度：', currentProgress);
    }, 1000);
  }
</script>

方法2：使用postMessage直接通信（无需加载API脚本） #

如果无法加载YouTube的官方API脚本，可以直接通过浏览器原生的postMessage API与iframe通信，YouTube嵌入iframe支持特定的指令调用。

实现步骤与代码示例： #

<iframe id="yt-player" width="640" height="360" src="https://www.youtube.com/embed/你的视频ID?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

<script>
  const iframe = document.getElementById('yt-player');
  const youtubeOrigin = 'https://www.youtube.com';

  // 监听iframe返回的消息
  window.addEventListener('message', (event) => {
    // 验证消息来源，避免跨域风险
    if (event.origin !== youtubeOrigin) return;
    
    if (event.data?.event === 'command') {
      switch(event.data.info) {
        case 'duration':
          console.log('视频总时长：', event.data.returnValue);
          break;
        case 'currentTime':
          console.log('当前播放进度：', event.data.returnValue);
          break;
      }
    }
  });

  // 等待iframe加载完成后发送指令
  iframe.onload = () => {
    // 请求获取视频时长
    iframe.contentWindow.postMessage({
      event: 'command',
      func: 'getDuration'
    }, youtubeOrigin);

    // 定时请求当前播放进度
    setInterval(() => {
      iframe.contentWindow.postMessage({
        event: 'command',
        func: 'getCurrentTime'
      }, youtubeOrigin);
    }, 1000);
  };
</script>

注意事项： #

• 必须确保iframe的src参数包含enablejsapi=1，否则无法启用JS交互能力
• 两种方案均为纯前端实现，无需后端发起请求，完全规避InfinityFree对YouTube后端API的屏蔽
• 需严格验证消息来源的origin，避免跨域安全风险

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