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

Posted 2023-05-07

【中文标题】控制 HTML5 视频中播放的开始位置和持续时间，然后下载该视频的特定持续时间

【英文标题】：Control start position and duration of play in HTML5 video and then Download that certain duration of that video

【发布时间】：2019-06-09 12:17:23

【问题描述】：

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

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

我尝试使用 canvas drawImage() 方法实现它，但它没有在画布中显示任何内容。

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) 
    

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

【问题讨论】：

欢迎来到 ***！分享您的研究对每个人都有帮助。告诉我们您尝试了什么（带有代码示例）以及为什么它不能满足您的需求。这表明您已经花时间尝试帮助自己，它使我们免于重复明显的答案，最重要的是它可以帮助您获得更具体和相关的答案！另见：How to Ask

要将视频播放到画布上，您需要使用 drawImage() 方法。还有一个视频有一个currentTime 属性。您可以使用此属性从某个时刻开始在画布上绘制视频。它也可以用来停止视频。

您最好使用画布中的预览，如下面的示例所示，这样用户可以确认开始/结束时间是您想要的，然后将这些作为参数传递给服务器端脚本使用 ffmpeg（或类似的）按要求渲染视频

【参考方案1】：

设置视频的当前时间我使用vid.currentTime = 2;这意味着视频从第二秒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);

canvasborder: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>

【讨论】：

非常感谢您抽出宝贵的时间以及使用代码 sn-p 提供如此简洁的答案。但我正在尝试为开始时间和结束时间实现一个按钮和两个输入字段。这样用户就可以提取所需持续时间的剪辑并下载该特定剪辑。原始视频应该从头到尾完整播放，但是在输入输入并单击按钮后，它应该触发将该剪辑提取到画布或其他视频元素，以便我可以下载该剪辑。

我认为视频元素会比画布更好，因为这样我就可以在服务器上下载或上传。

【参考方案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) 
    

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