使用here中的服务器端节点代码，但对于src="data:..."我使用fileSystem.readFile()。对于故障排除/测试，也可以使用该帖子上链接中的视频。实际上我使用的文件并不重要;没有工作。
我最近开始尝试使用HTML5视频。一切都在Chrome和Firefox上正常运行，但Safari已经被打破了几天，直到我花了一些时间仔细查看标签，我才能弄明白为什么。
我使用它将内容流式传输到页面中：
<video width="800" height="600" autoplay controls>
<source src="/file.mp4" type="video/mp4;base64">
Not supported.
</video>
直到我试过这个：
<video width="800" height="600" autoplay controls>
<source src="data:video/mp4;base64,(Data)">
</video>
我注意到了这个问题。毕竟，嵌入整个文件时怎么会出错？
事实证明，Safari会自动将第二个变为：
<video width="800" height="600" autoplay controls>
<source src="data:video/mp4,video;base64,(Data)">
</video>
我决定将视频从我的文件夹中删除到Safari中以查看它创建的标记，我发现了一些奇怪的内容：src位于<video>标记中而不是source标记中src } tag。
对于踢，我更改了video标记中的<source>标记以匹配<source>标记并且问题仍然存在，但不是空白框，而是一个黑框一个播放按钮，通过它的对角线。这表明，出于某种原因，Safari并没有关注src标签，而其他浏览器也这样做。
这是一个更令人担忧的问题，当我发现即使<video>的{{1}}被打破（通过打破src="data:..."），它仍然无法检查到看看是否有<source>兼容。真正有趣的是， 几天前正在关注<source>。
由于<video>＆＃39; src有同样的问题（,video），我在开发控制台中通过编辑删除了,video，它完全正常工作正如它应该。我试图放data:base64;video/mp4,，但问题仍然存在。
我尝试过的其他一些事情包括完全从标记中删除video/mp4;base64,，这在所有浏览器上都打破了它。我将video/mp4;base64放入type和<video>标记中的<source>参数中，当src为data:时，似乎会忽略这些参数
最终我尝试了一张图片，因为这些图片的加载时间要短得多，并且发现同样的问题：Safari会自动将,image添加到嵌入的图片中。
关联图片（<img src="/file.png">）可以与type="image/png;base64"一起使用 - 并且不会添加,image，而关联的视频（<video src="/file.mp4">）则不会工作（并添加,video）。
我想也许这可能与我的系统没有考虑字节范围有关（Per this post）...虽然同样的视频，使用完全相同的代码流，但第一天完美无缺我试了一下（一周前打电话）。
为了确保我不会错过任何内容，我重新启用旧代码段（有备份），看看它是否以这种方式工作。没有骰子。
虽然删除,video和,image手动适用于data:来源，但它不适用于文件来源，因为即使手动编辑它也不会导致Safari重新请求文件（当您手动编辑data:时，您可以看到它重新加载播放器。）
对于踢，我尝试了其他几个想法：type="video,mp4"和mp4,video，以及src="data:..."的等效内容，所有这些也适用于其他浏览器，但是失败了（添加了Safari上的,video到最后）。
简要回顾一下：
视频，src="file"或src="data:..."在,video或src="data:..."中自动添加了src="file" type="..."，无法取消src="data:..."或src="file"。
图像在,image时中断，但在,video时则中断。
从src="data:..."手动删除,video或src="file"。
从,image手动删除,video无效。
视频和图片在一周前使用相同（和类似）的代码都运行良好。
视频和图片目前适用于Chrome和Firefox。
任何人都知道可能导致{{1}}和{{1}}出现的原因，和/或如何阻止它？