如何通过HTML5 video标签获取YouTube视频1080p50高质量版本？

我之前折腾过YouTube流的加载问题，刚好能解答你的疑惑——你遇到的核心问题是YouTube的1080p及以上高帧率视频采用了音视频分离的自适应流，而常规方法（比如get_video_info）只能拿到音视频合并的低质量流（最高720p左右）。下面是具体的解决思路和步骤：

为什么get_video_info拿不到高质量流？ #

YouTube早就对get_video_info接口做了限制，很多高质量的自适应流信息不会再返回这个接口里了。现在要获取完整的流信息，得从视频页面的ytInitialPlayerResponse数据入手——这是YouTube播放器初始化时用的核心配置，包含了所有可用的流数据。

具体实现步骤 #

1. 获取视频的Player配置数据 #

访问目标视频页面后，在页面源码里找到包含ytInitialPlayerResponse的脚本块。这个JSON结构里的streamingData字段就是所有流的信息。
你可以用前端JS快速提取：

function fetchPlayerResponse() {
  const allScripts = document.querySelectorAll('script');
  for (const script of allScripts) {
    const scriptContent = script.textContent;
    if (scriptContent.includes('ytInitialPlayerResponse')) {
      const jsonMatch = scriptContent.match(/ytInitialPlayerResponse\s*=\s*({.+?});/);
      if (jsonMatch) {
        return JSON.parse(jsonMatch[1]);
      }
    }
  }
  return null;
}

2. 筛选1080p50的音视频流 #

在streamingData里有两个关键数组：

• formats：音视频合并的流，最高到720p，这就是你之前能拿到的版本；
• adaptiveFormats：分离的音视频流，这里面就能找到1080p50的视频流和对应的高质量音频流。

筛选代码示例：

function pickTargetStreams(playerResponse) {
  const adaptiveStreams = playerResponse.streamingData?.adaptiveFormats || [];
  // 找1080p、50帧的视频流
  const targetVideo = adaptiveStreams.find(stream => 
    stream.qualityLabel === '1080p' && 
    stream.fps === 50 && 
    stream.mimeType.startsWith('video/')
  );
  // 找高质量音频流
  const targetAudio = adaptiveStreams.find(stream => 
    stream.mimeType.startsWith('audio/') && 
    stream.audioQuality === 'AUDIO_QUALITY_HIGH'
  );
  return { video: targetVideo, audio: targetAudio };
}

3. 用MediaSource Extensions (MSE)同步播放音视频 #

因为音视频是分离的，不能直接给video标签塞单个URL，得用MSE来把两个流合并到同一个播放实例中：

async function loadAdaptiveStream(videoEl, videoStream, audioStream) {
  const mediaSource = new MediaSource();
  videoEl.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener('sourceopen', async () => {
    // 添加视频SourceBuffer
    const videoBuffer = mediaSource.addSourceBuffer(videoStream.mimeType);
    const videoRes = await fetch(videoStream.url);
    videoBuffer.appendBuffer(await videoRes.arrayBuffer());

    // 添加音频SourceBuffer
    const audioBuffer = mediaSource.addSourceBuffer(audioStream.mimeType);
    const audioRes = await fetch(audioStream.url);
    audioBuffer.appendBuffer(await audioRes.arrayBuffer());
  });
}

// 调用示例
const playerResp = fetchPlayerResponse();
if (playerResp) {
  const { video, audio } = pickTargetStreams(playerResp);
  if (video && audio) {
    const myVideo = document.querySelector('video');
    loadAdaptiveStream(myVideo, video, audio);
  }
}

注意事项 #

• 流URL过期：YouTube的流URL有有效期（几分钟到几十分钟），如果需要长期播放，得定期刷新流信息；
• 服务条款：直接抓取YouTube的流可能违反其服务条款，使用前请确认合规性；
• 受限视频：如果是年龄限制或需要登录的视频，还需要处理Cookie验证才能获取流URL；
• 分段加载：上面的示例是一次性加载完整流，实际生产中要处理大文件的分段加载，避免内存溢出。

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