Question

我有一个10秒的视频，我想使用HTML5进行控制。用户有2个输入字段。第一个是开始时间（例如3秒），第二个是输入播放时间（6秒）。例如，他们可能想要3秒钟开始播放视频并播放6秒钟。如何下载该视频的特定部分或在另一个视频元素中显示该部分视频并进行下载？

我尝试使用播放视频进行画布下载并下载，但失败了。没有有关播放视频到另一个元素的信息。

我尝试用canvas export interface EnvironmentToPost { envName: string; // ... }方法实现它，但是它在画布中不显示任何内容。

drawImage()

在上面的代码中，我有一个按钮将触发此功能。

Answer 1

要设置视频的当前时间，我正在使用vid.currentTime = 2;，这意味着视频从第二秒开始。

if (vid.currentTime <= 4) ctx.drawImage(vid, 0, 0, cw, ch);也表示如果当前时间少于4秒，则视频将被绘制到画布上。

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>

Answer 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) {
    }
}

在上面的代码中，我有一个按钮将触发此功能。

控制HTML5视频中的播放开始位置和播放时长，然后下载该视频的特定时长

2 个答案: