Question

我需要一种方法来播放在客户端webbrowser中创建的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

也许有点hacky，但是如果您使用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视频

1 个答案: