iOS 11 ObjectURL 支持 html5 视频

Question

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

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

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 上都运行良好，但只要我运行它在设备运行任何 [=32] 上运行=] 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 上实际工作。

iOS 11 ObjectURL 支持 html5 视频

iOS 11 ObjectURL support for html5 video

javascript

blob

http-live-streaming

html5-video

ios