按顺序在线播放视频文件，视频之间没有 delay/buffering

Question

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

由于我原来的 post 不够清楚，这里有扩展的解释和问题。

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

我想要的是构建（或使用如果存在的话）在线视频播放器，播放由多个视频文件组成的视频，这些文件在 real-time 中连接在一起，即当用户点击观看视频时。

例如，访问者访问我的网站并看到标题为 "Welcome" 的视频可以播放。当 he/she 单击播放该视频时，我将视频文件 "Opening.f4v"、"Welcome.f4v" 和 "Ending.f4v" 以及 join/merge/concatenate 一个接一个地制作成一个连续的视频飞.

生成的视频看起来像一个视频，没有任何视觉线索、滞后，甚至视频部分之间可观察到的最小延迟。基本上所做的是某种形式的 on-the-fly 编辑或 pre-editing，用户会看到结果。生成的视频未保存在服务器上，只是以这种方式合成和播放 real-time。

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

使用 flash/actionscript、ffmpeg、html5 或其他在线技术是否可行？我不需要解释这是怎么可能的，只需点头表示这是可能的，并提供一些链接以进一步调查。

此外，如果一种选择是使用 Flash，当从 iphone/ipad 访问站点时，有什么替代方法可以使这项工作正常进行？

Answer 1

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

这实际上允许您用动态 src 缓冲区替换 'src' 页面中视频的静态 'src' 文件，然后您可以使用自己的 Javascript代码。

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

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

您 HTML 将视频插入页面中您想要的位置：

.
.
.
<div>
  <video id="yourVideo1" controls="" autoplay="" width="320" height="240"></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/

Answer 2

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

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

指定第二个视频预加载器准备可见视频播放器的缓冲区数据。

第一个视频元素的 SRC 可以随时指定 seamless 播放。

按顺序在线播放视频文件，视频之间没有 delay/buffering

Play video files online sequentially without delay/buffering between videos

html

flash

video

actionscript

ffmpeg