如何在Expo-AV的Video组件中使用YouTube链接？技术求助

问题根源 #

Expo-AV的Video组件仅支持播放直接的媒体文件URL（比如.mp4、.mov这类视频资源地址），你使用的YouTube网页链接是网页跳转入口，并非视频的原始媒体源，组件无法解析这种链接，因此无法播放，且因未抛出格式不支持的明确错误，页面只会显示空白。

解决方法 #

方法1：用WebView嵌入YouTube播放器 #

这是最直接的实现方式，通过WebView加载YouTube的嵌入链接即可：

import { WebView } from 'react-native-webview';

// 在组件中使用
<WebView
  style={{ width: 300, height: 200 }}
  source={{ uri: 'https://www.youtube.com/embed/YaEG2aWJnZ8' }} // 将原链接的watch替换为embed
  allowsInlineMediaPlayback={true}
  mediaPlaybackRequiresUserAction={false}
/>

方法2：使用第三方YouTube专用播放库 #

推荐使用react-native-youtube-iframe，它是专为React Native/Expo封装的YouTube播放组件，体验比原生WebView更贴合移动端：

1. 安装依赖：

npx expo install react-native-youtube-iframe

2. 组件内使用示例：

import YoutubePlayer from 'react-native-youtube-iframe';
import { useState } from 'react';

// 组件代码
const [isPlaying, setIsPlaying] = useState(false);

<YoutubePlayer
  width={300}
  height={200}
  videoId="YaEG2aWJnZ8" // 只需传入原链接中v=后的视频ID即可
  play={isPlaying}
  onChangeState={(state) => {
    if (state === 'ended') setIsPlaying(false);
  }}
/>

方法3：提取YouTube直接媒体源（不推荐） #

虽然可以通过工具或第三方API获取视频的直接播放URL，但这种操作违反YouTube服务条款，且媒体源地址会随时失效，容易引发版权纠纷和稳定性问题，绝对不建议在生产环境使用。

额外提醒 #

• 无论采用哪种方案，都需严格遵守YouTube的服务条款，避免违规操作。
• 使用WebView时，iOS端需确保app.json中已配置允许HTTPS访问（Expo项目默认已开启，可自行确认）。

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