React Native Android中URL.createObjectURL(blob)生成字幕URL报错求助

React Native Android环境下，URL.createObjectURL生成的Blob URL和Web端的实现有本质差异——Web里的Blob URL能被浏览器直接识别，但RN里的Blob是JS层面的内存对象，原生的JWPlayer组件无法访问这个内存地址，所以才会抛出Cannot create URL for blob!的错误。下面是两个经过验证的解决办法：

方法一：使用Base64 Data URI替代Blob URL #

JWPlayer支持直接加载Data URI格式的字幕文件，我们可以把VTT字符串转换成Base64编码，然后构造符合要求的Data URI：

// 你的VTT格式字幕字符串
var vttRaw = `WEBVTT
00:00:25.520 --> 00:00:29.250
Naquele dia, a humanidade foi lembrada...
00:00:35.110 --> 00:00:38.180
do terror de estar à mercê deles`;

// 将VTT字符串转换为Base64编码（React Native自带Buffer支持）
const base64Vtt = Buffer.from(vttRaw, 'utf8').toString('base64');

// 构造Data URI
const vttDataUrl = `data:text/vtt;base64,${base64Vtt}`;

// 更新JWPlayer的playlist配置
const playlistItem = {
  // 其他播放器配置（比如视频地址等）
  tracks: [
    { file: vttDataUrl, label: 'en' }
  ]
};

这个方法不需要额外依赖，直接用RN内置的API就能实现，是最轻量化的解决方案。

方法二：将VTT字符串写入本地文件，使用本地路径加载 #

如果Base64方案因为字幕过长出现性能问题，可以把字幕写入本地缓存目录，然后给JWPlayer提供本地文件路径：

1. 首先安装文件操作库react-native-fs：

npm install react-native-fs --save

2. 编写保存字幕到本地的函数并使用：

import RNFS from 'react-native-fs';

// 异步保存VTT字符串到本地缓存
async function saveVttToLocalFile(vttContent) {
  // 定义本地文件路径（缓存目录不会占用用户存储空间）
  const localFilePath = RNFS.CachesDirectoryPath + '/subtitle_en.vtt';
  // 写入文件，编码为utf8
  await RNFS.writeFile(localFilePath, vttContent, 'utf8');
  return localFilePath;
}

// 使用示例
saveVttToLocalFile(vttRaw).then(localPath => {
  // 构造JWPlayer可用的本地文件URL
  const localFileUrl = `file://${localPath}`;
  
  const playlistItem = {
    // 其他播放器配置
    tracks: [
      { file: localFileUrl, label: 'en' }
    ]
  };
  
  // 这里初始化JWPlayer即可
});

这个方案适合大体积的字幕文件，因为本地文件的加载效率比Base64更高。

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