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

3回答

慕容708150

我想要的是将所有这些视频显示为一个视频，这样我就不会在从视频切换到视频时出现间隙。我的第一个想法是按需预处理视频剪辑。使用类似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);

0 0

largeQ

一种方法是在任何给定时刻在页面上同时有两个不同的播放器，并在观看第一个视频时预缓冲第二个视频。让我们假设以下结构（简化示例）：<video id="video1"></video><video id="video2" autoplay style="display:none" onloadstart="this.volume=0.0"></video>请注意，第一个视频可见，而第二个视频不可见（CSS）。此外，第二个视频在页面加载后立即开始缓冲和播放，但被静音。您将在一秒钟内看到这种“预缓冲”的好处。然后将另一个 JS 侦听器附加到第一个视频，执行以下步骤：一旦第一个视频的播放结束，它就会隐藏 player1它显示 player2，试图定位“0 秒”并取消静音由于浏览器已经有一些缓存/缓冲的数据，应该没有延迟PS：如果你想更进一步，你可以在第一个视频结束前 0.5 秒取消静音并重置第二个视频。通过这种方式，您将避免浏览器引入的任何可能的延迟或延迟，但如果两个视频在这 0.5 秒的时间间隔内都包含一些音频，则您可能会出现音频重叠的风险。

0 0

慕斯王

如果您坚持使用基本的 html 视频播放器功能（因为您没有提供很多代码来使用），一种可能性是通过使用不同的源标签包含它们来预加载不同的视频，并通过各种方式隐藏它们（更改显示或将它们放在第一个视频下方）同时跟踪控件（即暂停/静音它们。）一旦您的代码检测到第一个视频已停止，您就可以将其 html 替换为您之前隐藏的下一个。视频源对象本身有一些有趣的参数，您也可以使用这些参数来实现您想要的效果。否则，您应该能够自己手动将文件请求结果添加到视频缓冲区，如本文所述。您可能还需要使用其他库来简化您的任务。

0 0