Потоковое видео, как в плейлисте, без паузы при переходе - PullRequest
Новая
       21

Потоковое видео, как в плейлисте, без паузы при переходе

3 голосов
/ 02 июля 2019

Я делаю игрока . Я должен отобразить набор видео в очереди, читая из каталога.

Вот как видео перечислены в моей папке видео:

1. first_video.mp4

2. second_video.mp4

3. third_video.mp4

Пример. Когда заканчивается первое видео, мне нужно отобразить второе видео сразу после.

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

Существуют ли js видеоплееры для решения этой проблемы или библиотеки?

Можно ли это сделать с помощью PHP или js?

Любое предложение приветствуется. Заранее спасибо.

Ответы [ 3 ]

2 голосов
/ 06 июля 2019

Я хочу, чтобы все эти видео отображались как одно видео, чтобы у меня не было пробелов при переключении с видео на видео.

Моей первой мыслью было предварительно обработать видеоклипы по требованию. Объедините в один MP4, используя что-то вроде ffmpeg с плавным переходом между клипами (и кешируйте это, если это возможно для вашего варианта использования). Тогда вы можете использовать обычный video.src={pre_processed.mp4} в клиенте.

Bountify hosts пример использования ffmpeg и ffprobe для кроссфейдирования двух файлов mp4 (см. Выбранный ответ LayZee). Краткое описание функции приведено ниже. Вы можете использовать подобную функцию рекурсивно, чтобы настроить свой собственный переход и объединить файлы в вашем каталоге. 

function smoothtransition(
    $videoFilePath1,
    $videoFilePath2,
    $transitionDurationSeconds,
    $outputFilePath,
    $qualityFormatSettings)
{
    $firstVideoDurationCommand = implode(" ", ["...ffprobe_command..."]);
    $firstVideoFileDuration = (float)shell_exec($firstVideoDurationCommand);
    $firstVideoFileFadeStart = $firstVideoFileDuration
        - (float)$transitionDurationSeconds;
    $crossfadeCommand = implode(" ", ["...ffmpeg_command..."]);

    exec($crossfadeCommand, $output, $returnCode);

    return $returnCode === 1 ? $outputFilePath : $returnCode;
}

// Usage:
smoothtransition(
    "{PATH_TO_YOUR_FOLDER}/first_video.mp4",
    "{PATH_TO_YOUR_FOLDER}/second_video.mp4",
    10,
    "{PATH_TO_YOUR_FOLDER}/output_video.mp4",
    null);
1 голос
/ 11 июля 2019

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

<video id="video1"></video>

<video id="video2" autoplay style="display:none" onloadstart="this.volume=0.0"></video>

Обратите внимание, что первое видео видно, а второе нет (CSS). Кроме того, второе видео начинает буферизоваться и воспроизводиться, как только страница загружается, но приглушается. Вы увидите преимущества этого «предварительного буфера» через секунду.

Затем вы присоединяете другого слушателя JS к первому видео, которое выполняет следующие шаги:

  1. Как только воспроизведение первого видео заканчивается, оно скрывает player1
  2. Вместо этого он показывает player2, ищет положение «0 секунд» и включает его
  3. Поскольку в браузере уже есть некоторые кэшированные / буферизованные данные, их должно быть минимально или без задержки

PS: Если вы хотите пойти еще дальше, вы можете включить звук и сбросить второе видео за 0,5 секунды до его окончания. Таким образом вы избежите любых возможных задержек или задержек, возникающих в браузере, но вы рискуете перекрыть звук, если оба видео содержат некоторый звук в этом интервале 0,5 секунды.

1 голос
/ 11 июля 2019

Если вы настаиваете на использовании основных функций проигрывателя html-видео (поскольку вы не предоставили много кода для работы), одной из возможностей будет предварительная загрузка различных видео, включая их с использованием разных тегов источника, и скрытие их черезразличные средства (изменение отображения или наложение их под первым видео) при отслеживании элементов управления (т. е. приостановка / отключение звука). Как только ваш код обнаружит, что первое видео было остановлено, вы можете затем заменить его HTML следующимранее скрывался.

Сам объект-источник видео имеет некоторые интересные параметры, с которыми вы также можете играть, чтобы достичь желаемого.

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

...