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. /

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

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/x2oa8nh2/8/

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

• javascript
• ios
• html5-video
• blob
• http-live-streaming

• Probably the same bug, workaround: don't use File constructor, but Blob one. – Kaiido Commented Dec 5, 2017 at 1:38
• I tested to change from using the File constructor to the Blob constructor, but I'm still running into the same problem. I created a quick JSFiddle to show the bug. jsfiddle/x2oa8nh2/8 The upper video works on iOS 10 and 11. The bottom one does not work on iOS 11. – user2319925 Commented Dec 5, 2017 at 10:01
• Were you able to resolve this? I'm facing a similar issue. – Dustin Kerstein Commented Mar 5, 2018 at 22:28
• No I've not been able to resolve this yet. We decided to go with a different solution as for now. – user2319925 Commented Mar 21, 2018 at 10:38

1 Answer 1

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.