React Native中播放YouTube视频隐藏标识并保留播放控件的方案

react-native-youtube基于官方YouTube嵌入协议，强制要求展示品牌标识，无法通过配置隐藏，可通过以下方案实现需求：

1. 依赖调整 #

保留react-native-video作为底层播放组件，新增适配React Native的ytdl-core衍生包用于解析YouTube视频直链，依赖安装命令：

# 已安装过react-native-video可跳过此行
npm i react-native-video
npm i react-native-ytdl

注：解析YouTube视频直链需遵守对应服务条款，仅限个人非商用场景使用

2. 解析多画质直链 #

通过视频ID解析出不同清晰度的纯媒体流地址，同时获取视频时长等元数据，示例代码：

import ytdl from 'react-native-ytdl';

// 传入YouTube视频ID，返回可用的多画质流列表
const fetchVideoStreams = async (videoId) => {
  const streamList = await ytdl(videoId, {
    filter: format => format.hasVideo && format.hasAudio
  });
  return streamList.sort((a, b) => b.height - a.height); // 按画质从高到低排序
}

解析得到的流地址为无任何YouTube关联标识的纯媒体资源，播放时不会生成品牌相关UI。

3. 自定义播放器控件 #

react-native-video本身无内置UI，自行封装控制层即可实现所有需求功能：

• 播放/暂停/续播：调用组件提供的play、pause方法控制播放状态，本地存储播放进度，下次进入时调用seek方法跳转至对应位置实现续播
• 进度控制：监听组件的onProgress回调实时更新当前播放时间，拖拽进度条时触发seek方法实现快进快退，同时展示总时长与当前播放时长
• 画质切换：将解析得到的多画质流列表渲染为选择菜单，用户切换时更新source属性，同时跳转至当前播放进度，避免切换后重置进度
  所有控件完全自主实现，不会出现任何YouTube相关标识。

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