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

Question

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

我需要 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 调用并调用上述函数。