Necesito tomar una instantánea del video que se está reproduciendo en el navegador

Supongamos que se está reproduciendo un video en un navegador. Debajo del video, hay un botón. Al hacer clic en el botón, debe capturar una instantánea de la reproducción del video y mostrar la instantánea en el control deslizante debajo de él.

Necesito algo en jQuery o JavaScript.

preguntado el 03 de mayo de 12 a las 12:05

Gracioso. El primer resultado de la búsqueda en Google 'Capturar capturas de pantalla usando JQuery' es una publicación de StackOverflow. -

@Funny Aunque no tiene ninguna relación, ya que el OP está hablando de un video, no de un sitio web. ;) -

@Yoshi, es relevante porque todo lo que pide es tomar una instantánea del navegador, que está reproduciendo el video. y si se juega en flash, va a ser difícil -

@Jeevan Transmita el video a través de un elemento de lienzo. Esto le dará toda la libertad que necesita. -

1 Respuestas

Si el video no es una transmisión en vivo, puede encontrar una respuesta adecuada en este fragmento de código que escribí hace algún tiempo para un pequeño proyecto de medios. Es PHP pero puedes aplicar el mismo concepto con otros lenguajes

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();

    [...]
}

La función toma como entrada la identificación del video y el tiempo del cuadro que desea guardar. Luego usa el ffmpeg (http://ffmpeg.org/) utilidad para extraer la captura de pantalla.

La línea central es:

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

En Java sería algo como:

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

Luego, necesita un código javascript para crear una llamada ajax e invocar la función anterior.

Respondido el 29 de Septiembre de 12 a las 22:09

Buena solución a un problema difícil. Sin embargo, hay dos problemas: asegúrese de desinfectar el time valor para evitar que se modifique para invocar comandos arbitrarios, y agregaría la advertencia de que este es un vector potencial de DOS, ya que la extracción de miniaturas de un archivo de video es una operación moderadamente costosa, por lo que querrá asegurarse que no es invocable por cualquiera. - Chris Heald

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.