javascript - 使用 HTML 按顺序无缝播放视频文件

Question

我试过几种方法:

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

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

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

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

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

我的问题是:对于我的第三种方法，视频对象是否可以使用缓存中下载的文件？

看完之后，我认为以上三种可能是实现我目标的唯一途径。第三个确实是我想要的，但视频文件只下载了两次(一次是 Ajax 下载，另一次是调用 load())。请注意，如果不调用 load()，仅更改 src 属性并调用 play() 将不起作用。

Answer 1

媒体源扩展正是您所需要的。很难找到关于它们的好文档(在撰写本文时，MDN's documentation 大部分是 stub )，但您可以深入研究 the spec如果你敢。

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

此外，虽然它略微超出了您在此询问的范围，MPEG-DASH是一种完全按照您的兴趣做的技术(即通过将短片段编码为单独的文件来流式传输实时视频，例如独立的短 mp4，并将这些片段单独提供给浏览器)。如果没有媒体源扩展，就无法在浏览器中实现 MPEG-DASH，因此它们经常被一起讨论。在 the BBC's tech blog 上有一些关于使用 Media Source Extensions 使用 HTML 和 JavaScript 构建 DASH 播放器的好文章(在不同的详细程度)和 MSDN .

遗憾的是，Media Source Extensions 尚未在所有主流浏览器中可用。例如，我的 Mac 上最新版本的 Firefox 没有 window.MediaSource .这意味着您无法以仅使用 HTML 5 在所有主流浏览器上运行的方式进行分段直播流媒体 <video>元素还。不幸的是，如果您需要跨浏览器兼容性，仍然有必要回退到 Flash。

像您一样，我尝试在不使用媒体源扩展的情况下实现此行为。我尝试(并尝试组合)了一大堆技术，包括在 <video> 上交换 URL元素，取消隐藏和播放 <video>元素，提前完全下载片段并将它们存储在 Blobs 中我将用作 src对于我的 <video>元素，并设置 preload 属性为 auto提前将段加载到内存中......但没有任何效果。在 Google Chrome 中，使用任何这些技术都会在您 play() 时导致明显的卡顿。第一个视频的 ended 中的第二个视频事件，即使您已经提前完全加载了第二个视频。没有办法使用 <video> 获得无缝的连续视频播放在不支持媒体源扩展的浏览器中没有某种卡顿的元素。