将 blob 设置为设备的 HTML 5 视频标签的 src 属性答案

【问题标题】：Setting blob to src property of HTML 5 video tag for devices将 blob 设置为设备的 HTML 5 视频标签的 src 属性
【发布时间】：2014-06-24 00:07:48
【问题描述】：

我正在尝试通过将 HTML 5 视频标签的 src 属性设置为 Blob（使用 createObjectURL(blob) 函数）来播放视频。它似乎在台式机上运行良好，但在设备上却无法运行。以下是代码流程：

我保留了一个 .txt 文件，其中包含 Base64 格式的视频（这是一个要求，所以不能更改）。
单击按钮后，我使用文件系统 API 加载 .txt 文件并将 Base64 字符串转换为 Blob。
然后使用 createObjectURL(blob) 创建 Blob 的 url。
将createObjectURL(blob)生成的url设置为video标签的src属性。

我还为视频附加了监听器“onerror”、“loadstart”和“loadedmetadata”。在 Android 设备上会触发“loadstart”和“loadedmetadata”事件，但在单击视频的默认控件后不会播放视频，而在 IOS 设备上不会触发“loadstart”和“loadedmetadata”事件。

【问题讨论】：

目前我在 ios6 上检查它，不过我也可以在 ios7 上测试它。
根据caniuse.com/bloburls，IO6 6 需要一个 webkit-prefix，我不确定视频标签在 iOS7 之前是否可以与 window.URL 一起播放。
实际上，它是 iOS7 并且仍然无法正常工作（至少在我的测试中）。有没有人找到解决方案？

标签： javascript ios html5-video blob mobile-devices

【解决方案1】：

我遇到了同样的问题，无法找到简单的解决方案。但是，我注意到新的 Media Source API 似乎可以在 Android Chrome 中运行，这将使您能够解决这个问题 - 尽管只在某些设备上并且需要付出很多努力。

这里是媒体源 API 的示例：http://html5-demos.appspot.com/static/media-source.html

【讨论】：