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

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