连续在线播放视频文件，视频之间没有延迟/缓冲 [英] Play video files online sequentially without delay/buffering between videos
问题描述
是否可以在线播放由两个或多个视频文件组成的视频?
由于我原来的帖子不够清楚，这里有扩展的解释和问题.
我的网站托管在 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>...
用于提供视频来源的 Javascript:
//获取视频元素var videoElement = document.getElementById('yourVideo1');//创建一个MediaSource"并将其与此视频相关联var mediaSource = new MediaSource();video.src = window.URL.createObjectURL(mediaSource);//给MediaSource对象添加一个监听器来检查//视频已打开.在此功能中，您可以添加您的//代码以从服务器获取您的视频并添加//块"到媒体源缓冲区mediaSource.addEventListener('sourceopen', function(e) {//设置源视频的格式var mediaSourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');//从网络获取你的视频而(不是视频播放列表的结尾){...//从服务器流视频...//将收到的数据包添加到媒体源缓冲区mediaSourceBuffer.appendBuffer(receivedVideoPackets);//如果视频接近尾声开始获取下一个视频//避免缓冲延迟...//如果视频结束转到播放列表中的下一个视频...}}， 错误的);查看下面的 HTML5 Rocks 演示以了解其实际效果(针对略有不同的用例).
考虑到视频操作是多么棘手以及格式众多，如果其中一个成熟的视频播放器提供开箱即用的功能，那么对您来说会容易得多，所以我仍然会像评论中提到的那样尝试他们的论坛，但至少你知道这在技术上是可行的.
此处提供 MSE 规范:
这里有一个很好的介绍博客和演示(确保您的浏览器支持 MSE - 最新版本的 Chrome 支持):
您可以在此处找到最新的浏览器支持:
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.
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.
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.
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.
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.
Also, if one option is to use flash, what are alternatives for making this work when site is visited from iphone/ipad?
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.
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.
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:
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>
.
.
.
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);
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.
The MSE spec is available here:
And a good intro blog and demo is here (make sure your browser supports MSE - latest version of Chrome does):
You can find latest browser support here:
这篇关于连续在线播放视频文件，视频之间没有延迟/缓冲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
