Question

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

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

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

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

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

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

此外，如果可能的话，用户不应该在他/她看到结果视频之前等待此合并结束，而是能够立即获得视频的第一部分，同时合并完成同时进行。

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

此外，如果一个选项是使用闪存，当从iphone / ipad访问网站时，有什么替代方法可以使这个工作？

Answer 1

目前适用于某些浏览器的方法，以及大多数前进的浏览器都使用HTML5视频媒体源扩展机制。

这实际上允许您使用动态src缓冲区替换HTML5页面中的视频的静态'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/

在线播放视频文件，无需延迟/缓冲视频

1 个答案: