I am working on a set of volleyball coaching tools for going over film and whatnot, and I am working on building a tool that can clip a video to grab a small 30-second portion similar to how twitch does it so that people can download cool highlights.

I have come across a few libraries that aim at exactly that however I can not wrap my head around making it work. As of now, I am able to grab the current time as well as the -minus 60 seconds to account for the clip point while the video is playing

I do have the video playing through a canvas, not sure why but I feel like that is right?

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

    }

})