React Native Expo中如何正确嵌入播放YouTube视频链接

expo-av提供的Video组件仅支持加载直接返回视频流的直链资源（通常为.mp4/.mov等格式的可直接访问媒体地址）。你传入的YouTube观看页链接（格式为https://www.youtube.com/watch?v=xxx）是网页路由地址，并非视频直链：YouTube对平台内视频做了防盗链、分片传输处理，普通访问该链接返回的是网页内容而非视频流，因此Video组件无法正常解析播放。

你可以根据自己的业务场景选以下任一方案：

• 方案1：使用YouTube专用嵌入播放器（推荐，合规稳定）
  不要用expo-av组件加载YouTube资源，换成适配YouTube官方播放协议的嵌入组件，Expo项目中可直接使用react-native-youtube-iframe，该组件基于WebView封装YouTube官方Iframe播放器，无需手动解析视频地址，仅需传入视频ID即可实现播放，支持原生播放控制、全屏、倍速等能力。
  安装依赖：

  npx expo install react-native-youtube-iframe react-native-webview
  

  基础使用代码：

  import { useState } from 'react';
  import YoutubePlayer from 'react-native-youtube-iframe';
  
  export default function VideoPage() {
    const [playing, setPlaying] = useState(true);
    return (
      <YoutubePlayer
        height={220}
        play={playing}
        videoId="g57_0gejMig" // 对应YouTube链接中watch?v=后的字符串
        onChangeState={(state) => console.log('播放状态', state)}
      />
    )
  }
  

  注意：使用该方案需要设备可正常访问YouTube服务。
• 方案2：自行解析视频直链（不推荐，合规风险高）
  可搭建私有后端服务解析YouTube视频，获取对应分辨率的mp4格式直链后，再传入Video组件的source.uri字段播放。但该方式违反YouTube用户服务协议，且解析得到的直链为动态签名地址，有效期极短、随时可能失效，还存在触发访问IP被封禁的风险，不建议在生产环境使用。

  不要尝试在前端直接编写解析逻辑，YouTube前端页面代码做了深度混淆，解析规则更新频繁，前端实现不仅会增大包体积，还会经常性失效，维护成本极高。

• 方案3：自有资源独立托管（稳定性最高）
  如果你对视频资源有所有权，建议将视频源文件同步上传到自有对象存储/CDN服务，直接获取CDN返回的mp4直链传入Video组件播放，不依赖第三方平台限制，稳定性和可控性最高。

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