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

我尝试了几种方法：

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

我试图更改视频的src属性，但我必须在play（）之前调用load（）方法，load（）将加载新视频

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

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

但是当我在新视频上调用.load（）函数时，它会再次被下载

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

---

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

您需要媒体源扩展。很难找到关于它们的好文档（在撰写本文时，大部分都是存根），但如果你敢，你可以深入研究

两句话的总结是，使用媒体源扩展，您可以创建一个

MediaSource

对象，并将其设置为

元素的源，而不是将

指向完整视频的URL。然后，您可以使用JavaScript显式下载表示直播流更多片段的视频，并将它们附加到

MediaSource

对象中，这些片段将无缝播放

此外，虽然这稍微超出了您在此处提出的问题的范围，但这是一种完全符合您兴趣的技术（即，通过将短片段编码为单独文件（如独立短MP4）并将这些片段单独提供给浏览器来流式直播视频）。如果没有媒体源扩展，就无法在浏览器中实现MPEG-DASH，因此它们经常一起讨论。在和上使用媒体源扩展构建带有HTML和JavaScript的DASH播放器时，有一些很好的编写方法（在不同的细节层次上）

不幸的是，媒体源扩展尚未在所有主流浏览器中可用。例如，我的Mac电脑上最新版本的Firefox没有

window.MediaSource

。这意味着您还不能以一种只使用HTML5

元素就可以在所有主流浏览器上运行的方式进行分段直播。不幸的是，如果您需要跨浏览器的兼容性，仍然需要使用Flash

---

和您一样，我尝试在不使用媒体源扩展的情况下实现此行为。我尝试了（并尝试了组合）一整套技术，包括交换

元素上的URL，取消隐藏并播放

元素，提前完全下载片段并将它们存储在

元素的

src

中，并将属性设置为

auto

，以提前将片段加载到内存中。。。但什么都没用。在Google Chrome中，当您

play（）

第一个视频的

事件中的第二个视频结束时，即使您完全提前加载了第二个视频，使用这些技术中的任何一种都会导致明显的口吃。在不支持媒体源扩展的浏览器中，无法使用
元素获得无缝连续视频播放，而不会出现某种停顿。
为什么不将src属性设置为缓存的视频（可能是格式数据：video/mp4；……类似的内容），然后调用load（）Hi，我不知道如何使用javascript访问缓存文件？例如，我使用$.get（“），我不知道它保存在哪里？有什么提示吗？非常感谢。您可以使用var data；$.get（“myvideo”）.done（函数（dat）{data=dat；}）；你的想法是对的吗？我尝试将数据保存到一个Blob中，然后从该Blob创建对象URL，然后从Blob加载URL。问题是.load函数会导致不平凡的时间，并且比替换标记更容易闪烁。似乎不可能实现视频之间的无缝事务（我实际上是在尝试通过将实时视频分割成小的视频间隔并连续实时播放来实现实时视频）。更具体地说，对于替换视频标签的方法，隐藏的视频标签可以在旧标签仍在播放时调用load，因此在调用play和替换旧标签时，会更加平滑（虽然闪烁）。但是，如果只是替换src并在缓冲对象上调用load，会有很大的延迟。谢谢。我没有读到这篇文章。我已经找到了一个解决方案（不完美）我自己。解决方案是：使用video.js，动态创建视频标签并交换它们。另外，不要使用播放结束或类似事件，使用计时器。例如，如果下载视频，获取视频长度（对我来说很简单，因为每个视频都是0.8秒），我使用0.8s的计时器进行交换。闪烁消失。对于同步，我使用播放速率，使视频动态播放更快或更慢（也相应地设置计时器）@user534498谢谢你的接受，但是如果你对这个问题不再感兴趣，也没有读过答案，你最好不要接受这个问题。那样的话，如果有人来回答你的问题（也许可以提供几年后媒体源扩展如何做到这一点的指南，当它们在任何地方都可用时），哪一个答案最终会排在第一位可以由社区投票决定，而不是我被困在那里。@user534498嗨，你能在这里分享一个例子吗？谢谢