是否可以在视频和音频标签中使用数据 URI?
假设如下:
- 相关浏览器不限制数据 URI 的大小。
- 这样做实际上是有目的的(所以请不要问“有什么意义?”和“你确实意识到 Base64 编码会将你的文件扩展 33%,对吧?”)。
在技术上是否可以将整个视频或音频文件编码为 base64,并使用
Assuming the following:
- The browser in question doesn't limit the size of data URIs.
- There is actually a purpose to doing this (so please refrain from asking "what's the point?" and "you do realize base64 encoding will expand your file by 33%, right?").
Is it technically possible to encode an entire video or audio file into base64, and embed it in an HTML document using either <audio> or <video>?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
这些是我的测试结果。如果有提示,我也会尝试使用 Ogg。
图例
测试结果
These are my test results. I'll try with Ogg as well if prompted.
Legend
Test results
IE9 支持此功能,但仅限于它支持的文件格式。例如,它适用于 MP3 文件,但不适用于 WAV 文件。尝试http://www.themaninblue.com/experiment/JS-909/ 和以下测试:
IE9 supports this, but only for file formats it supports. For instance, it works for MP3 files but it will not work for WAV files. Tried http://www.themaninblue.com/experiment/JS-909/ and the following test:
应该是可以的,除了 IE8 及以下版本,它不支持音频/视频元素。
请注意,Opera 确实限制 URI 的大小。
It should be possible, except in IE8 and below, which does not support Audio/Video elements.
Note that Opera does limit the size of the URI.
这可能是因为 IE9 的音频元素不支持 WAV 格式。目前仅支持 MP3。我真的希望他们在 RTM 版本中改变这一点。
That's probably because IE9 doesn't support WAV format in its audio element. Only MP3 is supported by now. I really hope that they change that in the RTM version.
截至 2022 年,当我使用
dataURI
版本的播客 MP3(长度超过约 30 分钟或约 20MB)时,我在 Firefox (v100.0) 中遇到了文件大小限制。URI 无效。加载媒体资源数据:audio/mpeg;base64,...
将
FileReader
结果转换为二进制,然后转换为Blob
,如这里解决了这个问题。As of 2022 I ran into file size limits with Firefox (v100.0) when using
dataURI
versions of podcast MP3s that were above about 30 minutes long or about 20MB.Invalid URI. Load of media resource data:audio/mpeg;base64,...
Converting the
FileReader
result to binary and then aBlob
as described here solved the issue.无论如何,我能够获得一个大的(14mb)mp4 uuencoded 并在 OSX Safari 中作为数据 uri 播放,但不能在 Chrome 中播放。一旦我找到一些更小的块,仍然需要进行更多的测试。
还值得查看 HTML5 MediaSource API。它尚未得到广泛支持,但允许附加任意字节以进行媒体播放。
http://html5-demos.appspot.com/static/media-source.html
For what it's worth, I was able to get a large (14mb) mp4 uuencoded and playing as a data uri in OSX Safari, but not Chrome. Still have more testing to do with smaller chunks, once I find some.
Also worth checking out the HTML5 MediaSource API. It's not widely supported yet, but allows for appending arbitrary bytes for media playback.
http://html5-demos.appspot.com/static/media-source.html