使用 HTML <video> 按顺序无缝播放视频文件

Question

我尝试了几种方法：

1. 我试图创建隐藏的视频标签并显示/隐藏它们，但这会导致闪烁。

2. 我试图更改视频的 src 属性，但我必须在 play() 之前调用 load() 方法，而 load() 将加载新视频。

   这也不是我想要的，因为这会导致新视频停止一段时间（因为需要时间加载）。

3. 我试图通过使用 ajax 在上一个视频完成之前在后台加载新视频来缓存新视频。新视频可以在旧视频完成之前完全下载（300Kbytes）。

   但是当我在新视频上调用 .load() 函数时，它会再次下载。

我的问题是：对于我的第三种方法，视频对象有没有办法使用缓存中下载的文件？

看了一圈，我想以上三种可能是实现我的目标的唯一途径。第三个确实是我想要的，但视频文件刚刚下载了两次（一次是 Ajax 下载，另一个是调用 load()）。请注意，在不调用 load() 的情况下，仅更改 src 属性并调用 play() 将不起作用。

Answer 1

媒体源扩展正是您所需要的。目前还很难找到关于它们的好的文档（在撰写本文时，MDN 的文档主要是存根），但是如果您有胆量，可以深入研究规范。

两句话总结是，使用媒体源扩展，您可以创建一个MediaSource对象并将其设置为<video>元素的源，而不是指向<video>完整视频的 URL。然后，您可以使用 JavaScript 显式下载代表直播中更多片段的视频，并将它们附加到您的MediaSource对象中，这些片段将无缝播放。

此外，虽然它稍微超出了您在此处询问的范围，但MPEG-DASH是一种技术，可以准确地执行您感兴趣的操作（即，通过将短片段编码为单个文件来流式传输实时视频，例如短的独立 mp4，并将这些细分单独提供给浏览器）。如果没有媒体源扩展，就无法在浏览器中实现 MPEG-DASH，因此它们经常被一起讨论。在 BBC 的技术博客和MSDN上，有一些关于使用媒体源扩展使用 HTML 和 JavaScript 构建 DASH 播放器的好文章（在不同的细节级别）。

不幸的是，媒体源扩展尚未在所有主要浏览器中可用。例如，我 Mac 上最新版本的 Firefox 没有window.MediaSource. 这意味着你不能做的方式，将在仅使用HTML 5的所有主要的浏览器工作分段直播流<video>元素还。不幸的是，如果您需要跨浏览器兼容性，仍然需要回退到 Flash。

像您一样，我尝试在不使用媒体源扩展的情况下实现此行为。我试图（和试图合并）一大堆的技术，包括对换出的URL<video>元素，取消隐藏和打<video>元素，事先完全下载片段并将其存储在斑点，我会因为使用src我的<video>元素，并设置preload属性到auto加载段到存储器中......但毫无效果。在 Google Chrome 中，使用这些技术中的任何一种都会导致在您play()播放第一个视频ended事件中的第二个视频时出现明显的卡顿，即使您已经提前完全加载了第二个视频。没有一种方法可以使用<video> 在不支持媒体源扩展的浏览器中没有某种口吃的元素。