javascript - 我需要拍摄在浏览器中播放的视频的快照

Question

假设正在浏览器中播放视频。在视频下方，有一个按钮。单击该按钮应捕获播放视频的快照并在其下方的 slider 中显示该快照。

我需要 jQuery 或 JavaScript 的东西。

Answer 1

如果视频不是直播，您可以在我前段时间为一个小型媒体项目编写的这段代码片段中找到合适的答案。它是 PHP，但您可以将相同的概念应用于其他语言

public function actionAjaxSetThumbnailFromFrame()
{
    if(!isset($_POST['Video'], $_POST['Video']['id']) || !isset($_POST['time']))
        throw new CHttpException(400,'Invalid request.');

    $video = Video::model()->findByPk($_POST['Video']['id']);
    $path = Utils::generateUniquePath("thumbnail.jpg", Config::getParam('mediaPath'));

    $command = "ffmpeg  -itsoffset -{$_POST['time']}  -i \"$video->filePath\" -vframes 1 -an -f image2 \"$path\"";
    //generate thumbnail
    exec(
        $command,
        $out,
        $retval
    );

    $thumbnail = new Image();
    $thumbnail->name = basename($path);
    $thumbnail->serverUrl = '';
    $thumbnail->filePath = $path;
    $thumbnail->relativeServerUrl = Utils::relativeUrlPath($path);
    $thumbnail->save();

    [...]
}

该函数将视频 ID 和您要保存的帧的时间作为输入。然后它使用 ffmpeg ( http://ffmpeg.org/ ) 实用程序提取屏幕截图。

核心线是:

$command = "ffmpeg  -itsoffset -{$_POST['time']}  -i \"$video->filePath\" -vframes 1 -an -f image2 \"$path\"";

在 Java 中它会是这样的:

String command = "ffmpeg  -itsoffset -"+time+"  -i \""+videoPath+"\" -vframes 1 -an -f image2 \""+screenshotPath+"\"";
Process child = Runtime.getRuntime().exec(command);

然后您需要一些 javascript 代码来创建 ajax 调用并调用上述函数。