Html 连续在线播放视频文件，视频之间无延迟/缓冲

可以在线播放由两个或更多视频文件组成的视频吗

因为我原来的帖子不够清楚，这里有更多的解释和问题

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

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

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

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

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

flash/actionscript、ffmpeg、html5或其他在线技术是否可以实现这一点？我不需要解释这是怎么可能的，只是点头表示这是可能的，还有一些链接需要进一步调查

---

另外，如果有一种选择是使用flash，那么当从iphone/ipad访问站点时，有哪些替代方法可以使其工作？

目前，在某些浏览器上，以及在未来的大多数浏览器上，可以使用HTML5视频媒体源扩展机制

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

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

从非常高的层次来看，这看起来像：

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

.
.
.
<div>
  <video id="yourVideo1" controls="" autoplay="" width="320" height="240"></video> 
</div>
.
.
.

请看下面的HTML5 Rocks演示，以了解这一点（对于稍微不同的用例）

考虑到视频处理是多么棘手，格式如此之多，如果一个成熟的视频播放器提供了开箱即用的功能，那么对你来说会容易得多，所以我仍然会尝试评论中提到的他们的论坛，但至少你知道这在技术上是可能的

MSE规范可在以下位置获得：

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

您可以在此处找到最新的浏览器支持：

---

对我来说，这似乎是一个合理的问题-也许它只需要像“连续播放视频，而不需要在每个视频之间缓冲延迟”那样重新编写。我不知道有任何主要玩家支持它作为标准。FlowPlayer在这里有类似的功能：但它确实有一些视频间延迟。MS也有一个方法：。这可能值得直接在JWPlayer和FlowPlayer等论坛上询问。如果你找到了一个解决方案，也许你可以在这里分享。直接去玩家创建者和他们的论坛的好主意。有点明显，但谁知道我什么时候会想到，所以谢谢你！我去了ffmpeg论坛，我将前往玩家论坛。您介绍的HTML5解决方案看起来是长期的主要解决方案，flash player更直接。两者都很好，谢谢你的信息和代码！

//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);