按顺序在线播放视频文件，视频之间没有延迟/缓冲

Posted 2023-02-16

技术标签:

【中文标题】按顺序在线播放视频文件，视频之间没有延迟/缓冲【英文标题】：Play video files online sequentially without delay/buffering between videos 【发布时间】：2015-04-26 12:04:16 【问题描述】：

是否可以在线播放由两个或多个视频文件组成的视频？

由于我的原始帖子不够清楚，这里是扩展的解释和问题。

我的网站托管在 Linux/Apache/php 服务器上。我有 FLV/F4V 格式的视频文件。如有必要，我还可以将它们转换为其他可用格式。所有视频都具有相同的宽高比和其他参数。

我想要的是构建（或使用如果存在）在线视频播放器，它可以实时播放由多个视频文件连接在一起的视频，即当用户点击观看视频时。

例如，访问者访问我的网站并看到可以播放的标题为“欢迎”的视频。当他/她点击播放该视频时，我会获取视频文件“Opening.f4v”、“Welcome.f4v”和“Ending.f4v”并将它们一个接一个地加入/合并/连接，以动态创建一个连续的视频。

生成的视频看起来像一个视频，没有视觉线索、滞后，甚至视频部分之间的可观察到的最小延迟。基本上所做的是某种形式的即时编辑或预编辑，用户可以看到结果。生成的视频不会保存在服务器上，它只是实时合成和播放。

此外，如果可能，不应让用户在看到生成的视频之前等待此合并结束，而是能够在合并同时完成的同时立即播放视频的第一部分。

这可以通过 flash/actionscript、ffmpeg、html5 或其他一些在线技术实现吗？我不需要解释它是如何可能的，只需点头表示它是可能的以及一些进一步调查的链接。

另外，如果一个选项是使用 flash，当从 iphone/ipad 访问网站时，还有哪些替代方法可以使这项工作？

【问题讨论】：

这对我来说似乎是一个合理的问题——也许它只需要改写为“按顺序流式传输视频而不在每个视频之间缓冲延迟”。我不知道有任何主要参与者支持它作为标准。 FlowPlayer 在这里有这样的东西：flash.flowplayer.org/demos/configuration/instream-complex.html 但它确实有一些视频间延迟。 MS 也有一个方法：en.wikipedia.org/wiki/Advanced_Stream_Redirector。直接在 JWPlayer 和 FlowPlayer 等论坛上询问可能是值得的。如果您找到解决方案，也许您可以在这里分享。直接访问玩家创建者及其论坛的好主意。有点明显，但谁知道我什么时候会想到它，所以谢谢！我去了ffmpeg论坛，我去玩家论坛。 【参考方案1】：

目前适用于某些浏览器以及未来大多数浏览器的一种方法是使用 HTML5 视频媒体源扩展机制。

这实质上允许您将 HTML5 页面中视频的静态“src”文件替换为动态 src 缓冲区，然后您可以使用自己的 javascript 代码以任何方式填充。

因此，您可以编写代码在第一个视频快结束时预缓冲第二个视频，然后在第一个视频的最后一个数据包之后立即开始将第二个视频的数据包添加到 src。

在非常高级的术语中，这看起来像：

将视频插入页面中所需位置的 HTML：

.
.
.
<div>
  <video id="yourVideo1" controls="" autoplay=""  ></video> 
</div>
.
.
.

您的 Javascript 为您的视频提供源代码：

//Get the video element
var videoElement = document.getElementById('yourVideo1');

//Create a 'MediaSource' and associate it with this video
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);

//Add a listener to the MediaSource object to check for
//the video been opened. In this function you can add your
//code to get the get your videos from the servers and add
//'chunks' to the media source buffer

mediaSource.addEventListener('sourceopen', function(e) 

  //Set the format of the source video
  var mediaSourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

  //Get your video from the web
  while (not the end of your video playlist) 
    ...
    //Stream video from server 
    ...
    //Add packets received to the media source bufer
    mediaSourceBuffer.appendBuffer(receivedVideoPackets);

    //If near end of video start fetching next video to 
    //avoid buffering delay
    ...

    //If end of video go to next video in playlist
    ...

  


, false);

查看下面的 HTML5 Rocks 演示以了解其实际效果（针对稍微不同的用例）。

考虑到视频操作的复杂性和格式的多样性等，如果其中一个成熟的视频播放器提供开箱即用的功能，那么我仍然会尝试评论中提到的他们的论坛，但至少你知道这在技术上是可行的。

MSE 规范可在此处获得：

http://w3c.github.io/media-source/

这里有一个很好的介绍博客和演示（确保您的浏览器支持 MSE - 最新版本的 Chrome 支持）：

http://updates.html5rocks.com/2011/11/Stream-video-using-the-MediaSource-API

您可以在这里找到最新的浏览器支持：

http://www.jwplayer.com/html5/mediasource/

【讨论】：

您解释的 HTML5 解决方案从长远来看似乎是主要解决方案，flash player 更直接。两者都很棒，感谢您提供信息和代码！【参考方案2】：

使用两个视频元素，第一个是可见的，第二个是 display:none 用于缓冲。

第一个视频播放后，检查 currentPosition 和 currentDuration，