是否可以播放在线视频多数民众赞成由两个或多个视频文件？

Is it possible to play video online that's made of two or more video files?

由于我原来的职位还不够清楚，这里的扩大解释和问题。

Since my original post wasn't clear enough, here's expanded explanation and question.

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

My site is hosted on Linux/Apache/PHP server. I have video files in FLV/F4V format. I can also convert them to other available formats if necessary. All videos have same aspect ratio and other parameters.

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

What I want is to build (or use if exist) online video player that plays video composed of multiple video files concatenated together in real-time, i.e. when user clicks to see a video.

例如，访问者来到我的网站，看到的视频名为欢迎可打。当他/她点击播放该视频，我把视频文件Opening.f4v，Welcome.f4v和Ending.f4v和加入/合并/陆续将它们连接起来来创建一个连续的视频上飞。

For example, visitor comes to my site and sees video titled "Welcome" available to play. When he/she clicks to play that video, I take video files "Opening.f4v", "Welcome.f4v" and "Ending.f4v" and join/merge/concatenate them one after another to create one continuous video on the fly.

生成的视频看起来像一个视频，没有视觉线索，滞后或视频部分之间甚至最小的可观察到的延迟。基本上做了什么是某种形式的即时编辑或$ P $对 - 编辑，以及用户可以看到的结果。这导致视频不会被保存在服务器上，它只是创作和演奏的方式实时的。

Resulting video looks like one video, with no visual clues, lags or even smallest observable delay between video parts. Basically what is done is some form of on-the-fly editing or pre-editing, and user sees the result. This resulting video is not saved on the server, it's just composed and played that way real-time.

另外，如果可能的话，用户不应该等待他/她看到生成的视频前，该合并是结束了，但为了能够让视频播放，立即第一部分，而同时进行合并。

Also, if possible, user shouldn't be made to wait for this merging to be over before he/she sees resulting video, but to be able to get first part of the video playing immediately, while merging is done simultaneously.

这可能与闪光/动作，ffmpeg的，HTML5或其他在线技术？我不需要解释它是如何可能的，只是一个点头，这是可能的，一些链接进行进一步的调查。

Is this possible with flash/actionscript, ffmpeg, html5 or some other online technology? I don't need explanation how it's possible, just a nod that it's possible and some links to further investigate.

此外，如果一个选择是使用闪光灯，什么是为使这项工作时，站点从iPhone / iPad的访问方法？

Also, if one option is to use flash, what are alternatives for making this work when site is visited from iphone/ipad?

推荐答案

，将工作在某些浏览器目前的做法，大多数浏览器会转发是使用HTML5视频媒体来源扩展机制。

An approach that will work on some browsers currently, and on most browsers going forwards is to use the HTML5 Video Media Source Extension mechanism.

这基本上可以让你更换一个静态的SRC文件在你的HTML5网页视频，带有动态的src缓冲区，然后你可以填写你想用你自己的JavaScript code任何方式。

This essentially allows you replace a static 'src' file for a video in your HTML5 page, with a dynamic src buffer which you can then fill any way you want using your own Javascript code.

所以，你可以写code至pre-缓冲秒的视频，当你朝第一视频结束，然后立即开始为最后一个数据包后立即加入从第二视频到src包第一视频

So you can write code to pre-buffer the second video when you get towards the end of the first video and then immediately start adding packets from the second video to the src right after the last packet for the first video.

在相当高的水平而言，这看起来像：

In very high level terms this looks like:

您的HTML你想要在你的页面中插入视频：

Your HTML to insert the video where you want it in your page:

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

您Javascript来提供源为您的视频：

Your Javascript to provide the source for your video:

//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的岩石下面的演示看到这个动作（一个稍微不同的用例）。

Look at the HTML5 Rocks demo below to see this in action (for a slightly different usecase).

考虑如何棘手的视频处理是和众多的格式等，这将是对你容易得多，如果已建立的视频的球员之一提供的功能开箱即用，所以我仍然尝试他们的论坛中提到的意见，但至少你知道它在技术上是可行的。

Given how tricky video manipulation is and the multitude of formats etc, it would be much easier for you if one of the established video players provided the functionality out of the box so I would still try their forums as mentioned in the comment, but at least you know it is technically possible.

在MSE规范，请访问：

The MSE spec is available here:

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

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

And a good intro blog and demo is here (make sure your browser supports MSE - latest version of Chrome does):

http://updates.html5rocks.com/十一分之二千〇一十一/流视频 - 使用最MediaSource的-API

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

You can find latest browser support here:

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