在播放列表中流式传输一组视频而没有过渡间隙

Question

我一直在制作播放器。我应该通过从目录中读取来在队列中显示一组视频。这是视频在我的视频文件夹中的列出方式：1. first_video.mp42. second_video.mp43. third_video.mp4前任。当第一个视频结束时，我必须立即显示第二个视频。我面临的问题是缓冲下一个视频存在间隙。我想要的是将所有这些视频显示为一个视频，这样我就不会在从视频切换到视频时出现间隙。有没有js视频播放器可以解决这个问题或库？可以使用 PHP 或 js 来完成吗？任何建议表示赞赏。先谢谢了。

Answer 1

我想要的是将所有这些视频显示为一个视频，这样我就不会在从视频切换到视频时出现间隙。

我的第一个想法是按需预处理视频剪辑。使用类似ffmpeg剪辑之间平滑过渡的方法组合成一个 MP4 （如果对您的用例可行，则将其缓存）。然后您可以video.src={pre_processed.mp4}在客户端使用常规。

Bountify 托管了一个使用 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);

Answer 2

一种方法是在任何给定时刻在页面上同时有两个不同的播放器，并在观看第一个视频时预缓冲第二个视频。让我们假设以下结构（简化示例）：

<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 秒的时间间隔内都包含一些音频，则您可能会出现音频重叠的风险。

Answer 3

如果您坚持使用基本的 html 视频播放器功能（因为您没有提供很多代码来使用），一种可能性是通过使用不同的源标签包含它们来预加载不同的视频，并通过各种方式隐藏它们（更改显示或将它们放在第一个视频下方）同时跟踪控件（即暂停/静音它们。）一旦您的代码检测到第一个视频已停止，您就可以将其 html 替换为您之前隐藏的下一个。

视频源对象本身有一些有趣的参数，您也可以使用这些参数来实现您想要的效果。

否则，您应该能够自己手动将文件请求结果添加到视频缓冲区，如本文所述。您可能还需要使用其他库来简化您的任务。