Estoy trabajando en un conjunto de herramientas de entrenamiento de voleibol para revisar películas y otras cosas, y estoy trabajando en la creación de una herramienta que pueda recortar un video para capturar una pequeña porción de 30 segundos similar a cómo lo hace twitch para que la gente pueda descargar genial Destacar.

Me he encontrado con algunas bibliotecas que apuntan exactamente a eso, sin embargo, no puedo entender cómo hacer que funcione. A partir de ahora, puedo tomar la hora actual, así como los -menos 60 segundos para tener en cuenta el punto de clip mientras se reproduce el video.

Tengo el video reproduciéndose a través de un lienzo, no estoy seguro de por qué, pero siento que eso es correcto.

 <div> <input type="file" id="Input" name="video" accept="video/mp4, video/mov"> <button id="Play-Button">Play</button> <button id="Clip-Button">Clip</button> </div> <canvas id="canvas"></canvas> <script src="../FilmRoom/videoclipping.js"></script>

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var Film = document.createElement('video'); const input = document.querySelector('input'); var url = null; let currentTime = 0; let minusTime = 0; var clippedVid; input.addEventListener('input', () => { const file = input.files[0]; if(!file) return; url = URL.createObjectURL(file); Film.src = url; Film.addEventListener('loadeddata', () =>{ canvas.width = 1280; canvas.height = 720; }) }) // set canvas size = video size when known document.getElementById("Play-Button").onclick = function clip(){ Film.play(); } Film.addEventListener('play', () => { function step() { ctx.drawImage(Film, 0, 0, canvas.width, canvas.height); requestAnimationFrame(step); } requestAnimationFrame(step); document.getElementById("Clip-Button").onclick = function clip(){ Film.pause(); currentTime = Film.currentTime; minusTime = currentTime-60; } })