iOS 11 ObjectURL 对 html5 视频的支持

Posted 2023-05-08

【中文标题】iOS 11 ObjectURL 对 html5 视频的支持

【英文标题】：iOS 11 ObjectURL support for html5 video

【发布时间】：2018-05-18 03:37:33

【问题描述】：

我需要一种播放在客户端网络浏览器中创建的 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。

【问题讨论】：

可能是相同的错误，解决方法：不要使用 File 构造函数，而是使用 Blob 构造函数。

我测试过从使用 File 构造函数更改为 Blob 构造函数，但我仍然遇到同样的问题。我创建了一个快速的 JSFiddle 来显示错误。 jsfiddle.net/x2oa8nh2/8上面的视频适用于iOS 10和11，下面的视频不适用于iOS 11。

你能解决这个问题吗？我面临着类似的问题。

不，我还没能解决这个问题。我们决定现在采用不同的解决方案。

【参考方案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 上实际使用。

【讨论】：

@Ryan，据我所知，这仅适用于静态流。我开源了Pepper，我正在使用它的项目，如果你想看看how I ended up implementing it.

感谢您告诉我！