时间戳

首页 > 解决方案 > React native (Android) - 创建 URL.createObjectURL(blob)

javascript - React native (Android) - 创建 URL.createObjectURL(blob)

问题描述

我试图创建一个 blob url 以使用字符串作为 JwPlayer 字幕的文件。

字幕是这样加载的：

const playlistItem = {
    ...
    tracks: [
        {
            file: 'https://myfakesite.org/subtitles.vtt',
            label: 'en'
        }
    ]
}

因此，因为 jwplayer 不接受我的源（subtitles.ass），所以我将 .ass 转换为 .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`;

由于 jwplayer 需要一个 url，我将此字符串转换为 blob url：

//Generate blob
var blob = new Blob([vttRaw], {
    type: "text/vtt; charset=utf-8"
});

//Generate url
var vtt_url = URL.createObjectURL(blob) + "#.vtt";

在可以工作的网络浏览器中，但在 react-native-android 中会导致错误。

Possible Unhandled Promise Rejection (id: 0):
Error: Cannot create URL for blob!

斑点错误

我认为问题是生成一个blob url，有人知道我能做什么吗？

标签： javascriptandroidreact-nativereact-native-android

解决方案

我在 React Native for Android 中遇到了这个问题。以下适用于iOS但不适用于Android

URL.createObjectURL(blob)

尝试传递 base64 数据而不是 url，就像在这篇文章中一样。

也许是这样的：

//Generate blob
var blob = new Blob([vttRaw], {
    type: "text/vtt; charset=utf-8"
});

const fileReaderInstance = new FileReader();
fileReaderInstance.readAsDataURL(blob);
fileReaderInstance.onload = () => {
    base64 = fileReaderInstance.result;
    vtt_data = base64;
}

推荐阅读