Control start position and duration of play in HTML5 video and then Download that certain duration of that video

1
votes

I have a video of 10 seconds which I would like to control using HTML5. There are 2 input fields for the user. One is start time (like 3 seconds) in first box and input duration to play (6 seconds) in second box. For example, they might want to start the video 3 seconds in and play for 6 seconds. How can I download that certain part of that video or show that part of video in another video element and download it?

I tried using playing video to canvas and downloading it but I failed. There is no information regarding playing video to another element.

I have tried to implement it with canvas drawImage() method but it does not display anything in canvas.

function extractFunction(){
    video.addEventListener('timeupdate', function() {

        if (video.currentTime >= endTime) {
            this.pause;
        }
    }, false);

    video.load();
    video.play();
    try {
        video.currentTime = starttime;
        ctx.drawImage($this, 0, 0);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    } catch (ex) {
    }
}

In the above code I have a button which will trigger this function.

2
javascripthtml5-canvashtml5-video
Welcome to StackOverflow! Sharing your research helps everyone. Tell us what you've tried (with code samples) and why it didn’t meet your needs. This demonstrates that you’ve taken the time to try to help yourself, it saves us from reiterating obvious answers, and most of all it helps you get a more specific and relevant answer! See also: How to Ask - gillesB
To play a video to a canvas you need to use the drawImage() method. Also a video has a currentTime property. You can use this property to begin drawing the video on the canvas from a certain moment. It can also be used to stop the video. - enxaneta
you are better off using the preview in the canvas as the samples below show so the user can confirm the start/end time are what you want, then pass those as parameters to a server-side script which uses ffmpeg (or similar) to render the video as requested - Offbeatmammal

2 Answers

1
votes

To set the video's current time I'm using vid.currentTime = 2; This means that the video begins from second 2.

Also if (vid.currentTime <= 4) ctx.drawImage(vid, 0, 0, cw, ch); means that if the current time is less than 4 sec the video will be painted onto the canvas.

let vid = document.getElementById("vid");
let canvas = document.getElementById("cnv");
let ctx = canvas.getContext("2d");

let cw = (canvas.width = 360);
let ch = (canvas.height = 450);

// set the video's current time
vid.currentTime = 2;

vid.addEventListener(
  "play",
  () => {
    paintVideo(vid, ctx, cw, ch);
  },
  false
);

function paintVideo() {
  requestAnimationFrame(paintVideo);
  // if the video is paused or ended return
  if (vid.paused || vid.ended) {
    return;
  }
  // get the currentTime and if it's <= 4 paint the video on the canvas
  if (vid.currentTime <= 4) ctx.drawImage(vid, 0, 0, cw, ch);
}
canvas{border:1px solid}
<video id="vid" controls>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/twitter_cat.mp4"  type="video/mp4">
</video>
<canvas id="cnv"></canvas>
0
votes
function extractFunction(){
    video.addEventListener('timeupdate', function() {

        if (video.currentTime >= endTime) {
            this.pause;
        }
    }, false);

    video.load();
    video.play();
    try {
        video.currentTime = starttime;
        ctx.drawImage($this, 0, 0);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    } catch (ex) {
    }
}

In the above code I have a button which will trigger this function.