iOS 11支持HTML5视频的ObjectURL

Question

我需要一种播放在客户端 Web 浏览器中创建的 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上无法工作。

- user2319925

---

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

我尝试更改使用File构造函数为Blob构造函数，但仍然遇到相同的问题。 我创建了一个快速的JSFiddle来展示这个错误。 https://jsfiddle.net/x2oa8nh2/8/上面的视频在iOS 10和11上工作。下面的视频在iOS 11上无法工作。 - user2319925

你能解决这个问题吗？我也遇到了类似的问题。 - Dustin Kerstein

不，我还没有解决这个问题。我们决定暂时采用另一种解决方案。 - user2319925

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视频的任何设备上实际使用是可行的。

- Chris Calo

---

@Ryan，从我所看到的情况来看，这只适用于静态流。如果你想看看我最终是如何实现它的，我已经开源了Pepper项目，可以去看一下。 - Chris Calo

谢谢你告诉我！ - Ryan