javascript - React native (Android) - Create URL.createObjectURL(blob) - Stack Overflow

admin管理员组

文章数量:1406924

Im trying to create a blob url to use string as file for JwPlayer subtitles.

subtitles are loaded like this:

const playlistItem = {
    ...
    tracks: [
        {
            file: '.vtt',
            label: 'en'
        }
    ]
}

So because jwplayer dont accept my source (subtitles.ass) i converted .ass to .vtt resulting as string.

Like this:

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`;

As jwplayer needs a url, i converted this string to blob url:

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

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

In web browser that works, but in react-native-android results in a error.

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

blob error

I think the problem is to generate a blob url, anyone know what can i do?

Im trying to create a blob url to use string as file for JwPlayer subtitles.

subtitles are loaded like this:

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

So because jwplayer dont accept my source (subtitles.ass) i converted .ass to .vtt resulting as string.

Like this:

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`;

As jwplayer needs a url, i converted this string to blob url:

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

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

In web browser that works, but in react-native-android results in a error.

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

blob error

I think the problem is to generate a blob url, anyone know what can i do?

• javascript
• android
• react-native

Share Improve this question Follow asked Dec 9, 2020 at 12:26 user11807888user11807888

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I had this issue in React Native for Android. The following worked in iOS but not Android

URL.createObjectURL(blob)

Try passing base64 data rather than the url, like in this post.

Maybe something like this:

//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;
}

本文标签： javascriptReact native (Android)Create URLcreateObjectURL(blob)Stack Overflow