iOS 11 ObjectURL 对 html5 视频的支持

Question

我需要一种播放在客户端网络浏览器中创建的 hls m3u8 播放列表的方法，而不是使用外部文件。

我目前正在生成一个字符串并创建一个稍后使用对象 URL 链接的文件。

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

然后，此 URL 将用作视频元素中的来源。

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

这个系统在所有 iOS 10 版本和 OSX 上都可以正常工作，但是一旦我在运行任何 iOS 11 版本的设备上运行它，我就会从视频元素中收到错误代码 4“MEDIA_ERR_SRC_NOT_SUPPORTED”。

我找不到任何路径注释说明可能表明这在 iOS 11 中不起作用的原因发生了变化。 有没有其他方法可以在 iOS 10 和 11 中解决这个问题？

如有任何帮助或对此问题的见解，我们将不胜感激。

编辑： 我创建了一个 jsfiddle 来帮助理解这个问题。 https://jsfiddle.net/x2oa8nh2/8/

上面的视频适用于 iOS 10 和 11（以及 OSX Safari）。底部的不适用于 iOS 11。

Answer 1

也许有点麻烦，但如果您使用 base64 数据 URI，它将解决此问题。在我的用例中，我使用的是 HLS M3U8 播放列表，因此对 MIME 类型进行了相应调整：

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

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

看起来它可以在 anything that supports HTML5 video 上实际使用。