Estoy creando un reproductor de video personalizado, me gustaría agregar una vista previa de video cuando el usuario pasa el cursor sobre una barra de progreso.
Puedo generar miniaturas usando FFmpeg de la siguiente manera.
ffmpeg -i input -filter_complex \ "select='not(mod(n,60))',scale=240:-1,tile=layout=4x8" \ -vframes 1 -q:v 2 outputfile.jpgPROBLEMA
Para usar la imagen de sprite creada anteriormente (miniaturas combinadas), necesito generar un WEBVTT que contenga miniaturas y marcos de intervalo de tiempo como este a continuación.
WEBVTT 00:00:00.000 --> 00:00:03.000 thumbnails.jpg#xywh=0,0,120,68 00:00:03.000 --> 00:00:06.000 thumbnails.jpg#xywh=120,0,120,68 00:00:06.000 --> 00:00:09.000 thumbnails.jpg#xywh=240,0,120,68No puedo encontrar ningún comando o tutorial de FFmpeg sobre cómo crear dicho archivo WEBVTT usando node-js y FFmpeg.
¿Quizás alguien aquí sabe la solución a este problema? cualquier ayuda será apreciada.
Deberá crear su propia herramienta para crear el archivo WEBVTT. Y es un proceso sencillo, solo necesitas obtener la información que necesitas y llenarla en el siguiente formato:
00:00:00.000 --> 00:00:03.000 thumbnails.jpg#xywh=0,0,120,68y luego guarde el archivo.
Ejemplo:
Digamos que tienes un video de 60 segundos de duración. Utiliza ffmpeg para generar 10 miniaturas.
Usted escribe un programa corto (en este caso, Node.js) que se repite en función de la cantidad de miniaturas siguiendo el formato anterior de una manera similar a esta:
const fs = require('fs') const moment = require('moment') let video_length = 60 let number_of_thumbnails = 10 let thumb_interval = video_length/number_of_thumbnails // so 6 seconds per thumbnail let sprite_width = 600 // Values are assumed based each thumbnail having let sprite_height = 340 //a width of 120 and a height of 68 with a total of 10 let start_time = moment('00:00:00', "HH:mm:ss.SSS") let end_time = moment('00:00:00', "HH:mm:ss.SSS").add(thumb_interval , 'seconds') let thumb_output = "WEBVTT\n\n" for(let i=0;i<=(sprite_height /68);i++){ for(let j=0;j<=(sprite_width/120);j++){ thumb_output +=start_time.format("HH:mm:ss.SSS") +" --> "+ end_time.format("HH:mm:ss.SSS")+"\n" thumb_output += "thumbnails.jpg#xywh="+(j*120)+","+(i*68)+",120,68\n\n" start_time.add(thumb_interval , 'seconds') end_time.add(thumb_interval , 'seconds') } } fs.writeFileSync('thumbnails.vtt', thumb_output)La biblioteca Moment.js se usó para simplificar el incremento y el formato del tiempo.