Control start position and duration of play in HTM

问题:

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.

回答1:

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>

回答2:

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.