Воспроизведение видеофайлов онлайн последовательно без задержки/буферизации между видеороликами

Question

Можно ли воспроизводить видео онлайн, состоящее из двух или более видеофайлов?

Поскольку мой первоначальный пост не был достаточно ясным, вот расширенное объяснение и вопрос.

Мой сайт размещен на сервере Linux/Apache/PHP. У меня есть видеофайлы в формате FLV/F4V. Я также могу преобразовать их в другие доступные форматы. Все видео имеют одинаковое соотношение сторон и другие параметры.

Я хочу создать (или использовать, если есть) онлайн-видеоплеер, который воспроизводит видео, состоящее из нескольких видеофайлов, объединенных вместе в режиме реального времени, то есть когда пользователь нажимает на видео.

Например, посетитель приходит на мой сайт и видит видео, которое называется «Добро пожаловать». Когда он нажимает на воспроизведение этого видео, я беру видеофайлы «Opening.f4v», «Welcome.f4v» и «Ending.f4v» и присоединяюсь/объединяю/объединяю их один за другим, чтобы создать одно непрерывное видео на лету.

Результирующее видео выглядит как одно видео, без видимых подсказок, задержек или даже самой маленькой наблюдаемой задержки между частями видео. В основном то, что делается, это некоторая форма редактирования на лету или предварительная редактирование, и пользователь видит результат. Это видео не сохраняется на сервере, оно просто составлено и воспроизведено таким образом в режиме реального времени.

Также, если это возможно, пользователю не следует ждать завершения этого слияния до того, как он/она увидит результирующее видео, но чтобы получить первую часть воспроизведения видео сразу, в то время как слияние выполняется одновременно ,

Возможно ли это с помощью flash/actionscript, ffmpeg, html5 или некоторых других онлайн-технологий? Мне не нужно объяснять, как это возможно, просто кивнуть, что это возможно, и некоторые ссылки для дальнейшего изучения.

Также, если один из вариантов заключается в использовании вспышки, какие альтернативы для этой работы при посещении сайта с iphone/ipad?

Answer 1

Подход, который будет работать в некоторых браузерах в настоящее время, а в большинстве браузеров, идущих вперед, - использовать механизм расширения HTML Media Video Source.

Это, по сути, позволяет заменить статический файл 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 ниже, чтобы увидеть это в действии (для немного другой usecase).

Учитывая, насколько сложны манипуляции с видео и множество форматов и т. Д., Вам было бы намного легче, если бы один из установленных видеоплееров предоставил функциональность из коробки, поэтому я все равно попытаюсь их форумы, как указано в комментарии , но, по крайней мере, вы знаете, что это технически возможно.

Спецификация 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/