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

看起来它可以在任何支持 HTML5 视频的实践中工作。