CODEWITHSUNDEEP
javascriptioshtml5-videoblobhttp-live-streaming
user2319925
user2319925

Reputation: 209

iOS 11 ObjectURL support for html5 video

I need a way of playing hls m3u8 playlists that are created in the clients webbrowser and not using and external file.

I am currently generating a string and creating a file that is later linked using Object URLs.

const playlistFile = new File([playlistString], playlistName, { type: 'application/x-mpegURL' });  
const playlistURL = URL.createObjectURL(playlistFile);

This URL is then used as the source in the video element.

<video playsinline="" controls="" src="blob:http://localhost:8080/b9a0b81f-d469-4004-9f6b-a577325e2cf3"></video>

This system works fine in all iOS 10 version and on OSX, but as soon as I run it on a device running any iOS 11 version I get an error code 4 "MEDIA_ERR_SRC_NOT_SUPPORTED" from the video element.

I'm not able to find any path notes saying anything that may indicate a change to why this does not work in iOS 11. Is there any other way to solve this problem that works in bith iOS 10 and 11?

Any help or insight into this problem would be appriciated.

Edit: I created a jsfiddle to help understand the problem. https://jsfiddle.net/x2oa8nh2/8/

The upper video works on iOS 10 and 11 (And OSX Safari). The bottom one does not work on iOS 11.

Upvotes: 10

Views: 1671

Answers (1)

Chris Calo
Chris Calo

Reputation: 456

Perhaps a touch hacky, but if you use base64 data URIs, it will resolve this issue. In my use-case, I was working with an HLS M3U8 playlist, so the MIME type has been tweaked accordingly:

const m3u8 = "[M3U8 string data]";
const hlsMimeType = "application/vnd.apple.mpegurl";

nativeVideo.type = hlsMimeType;
nativeVideo.src = `data:${hlsMimeType};base64,${btoa(m3u8)}`;

Looks like it will work in practice on anything that supports HTML5 video.

Upvotes: 8

Related Questions