JavaScript与HTML5 Video API交互从视频中截取当前播放画面

一、HTML5 Video基础

HTML5 <video> 元素为开发者提供了一种内置的方式来播放视频内容

加载视频资源

创建一个<video>元素，播放“your_video.mp4”的视频文件，添加controls属性会在视频播放器上显示默认控制条（如播放/暂停按钮、进度条等）：

<video src="your_video.mp4" controls width="640" height="360"></video>

还可以同时指定多个源以适应不同的浏览器兼容性：

<video controls width="640" height="360">
  <source src="your_video.mp4" type="video/mp4">
  <source src="your_video.webm" type="video/webm">
  <!-- 更多备用格式 -->
</video>

控制播放状态

HTML5 Video API提供了JavaScript接口来控制视频播放状态：

currentTime：获取或设置视频当前播放的时间点（单位是秒）。

var myVideo = document.querySelector('video');
console.log(myVideo.currentTime); // 获取当前时间点
myVideo.currentTime = 10; // 设置当前时间为视频第10秒处

paused：返回一个布尔值，表示视频是否处于暂停状态。

if (myVideo.paused) {
  console.log('Video is currently paused.');
} else {
  console.log('Video is currently playing.');
}

play() 和 pause() 用于控制视频播放和暂停。

// 播放视频
myVideo.play().then(function() {
  console.log('Video started playing.');
}).catch(function(error) {
  // 处理错误，比如用户没有授权自动播放音频
});

// 暂停视频
myVideo.pause();

二、Canvas与绘图基础

canvas 元素的作用

<canvas> 为网页提供了一个画布，可通过JavaScript进行图形和图像的动态生成。

2D绘图基本方法

CanvasRenderingContext2D 提供了丰富的API来实现canvas上的绘制操作，涵盖线条、形状、填充、文本和图像处理等。

fillRect(x, y, width, height)：绘制填充的矩形。
strokeRect(x, y, width, height)：绘制矩形边框。
beginPath() 和 closePath()：定义路径的开始和结束。
moveTo(x, y) 和 lineTo(x, y)：绘制直线路径。
arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制圆弧或扇形。
fill() 和 stroke()：填充或描边当前路径。
fillStyle 和 strokeStyle：设置填充和描边的颜色或渐变样式。
font 和 fillText(text, x, y [, maxWidth])：设置字体并绘制文本。
createLinearGradient(x1, y1, x2, y2)：创建线性渐变。
createPattern(image, repetition)：创建重复图案填充样式。

`drawImage()` 方法

将图像数据绘制到canvas上。

context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dWidth, dHeight);
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

image：要绘制的源图像或视频元素。
dx, dy：目标canvas上的位置坐标，确定图像左上角的放置位置。
dWidth, dHeight：可选参数，指定在canvas上绘制时图像的目标宽度和高度。
sx, sy, sWidth, sHeight：如果提供这些参数，则从源图像中裁剪指定区域进行绘制。

视频帧绘制流程

获取 <video> 元素：

   var videoElement = document.querySelector('video');

确保视频已加载并可以播放：

   videoElement.addEventListener('canplaythrough', function() {
     // 视频可以正常播放时执行绘图逻辑
   });

获取canvas元素及其2D渲染上下文：

   var canvas = document.getElementById('myCanvas');
   var context = canvas.getContext('2d');

在每帧需要更新时（通常是在requestAnimationFrame回调中），清除canvas并绘制视频帧：

   function drawVideoFrame() {
     if (!videoElement.paused && !videoElement.ended) {
       // 清除canvas以便于下一帧绘制
       context.clearRect(0, 0, canvas.width, canvas.height);

       // 获取视频当前帧并绘制到canvas
       context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
       
       // 请求下一帧动画
       requestAnimationFrame(drawVideoFrame);
     }
   }

   // 启动视频帧绘制循环
   requestAnimationFrame(drawVideoFrame);

三、实现视频截图

创建Canvas元素

在HTML中准备一个<canvas>元素，用于绘制视频帧。

<video id="videoPlayer" src="your_video_url.mp4" controls></video>
<canvas id="screenshotCanvas" style="display:none;"></canvas>
<button onclick="capture()">截图</button>
<button onclick="download()">下载</button>
<div id="preview"></div>

获取Video元素和Canvas上下文

在JavaScript中获取video元素和canvas上下文。

const video = document.getElementById('videoPlayer');
const canvas = document.getElementById('screenshotCanvas');
const ctx = canvas.getContext('2d');

等待视频就绪

视频需要加载并播放到某一帧才能截图，所以要在canplaythrough事件触发时进行操作。

video.addEventListener('canplaythrough', function() {
  // 设置canvas尺寸与视频相同
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  
  // 绘制视频帧到canvas
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
});

将Canvas转换为图片并预览

function capture() {
        // 绘制视频帧到canvas
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        // 将canvas图像转为URL格式
        const imgURL = canvas.toDataURL('image/jpeg'); // 或者 'image/png'
        console.log(imgURL);
        // 预览截图，插入到preview div中
        const img = document.createElement('img');
        img.src = imgURL;
        img.className = 'previewImg';
        document.getElementById('preview').appendChild(img);
};

将Canvas转换为图片并下载

使用canvas.toDataURL()方法将canvas内容转换为数据URL表示的图像，然后创建一个可下载链接或者模拟点击事件来下载。

function downloadScreenshot() {
  const dataURL = canvas.toDataURL('image/jpeg'); // 或者 'image/png'

  // 创建隐藏的可下载链接
  let link = document.createElement('a');
  link.download = 'video_screenshot.jpg'; // 文件名
  link.href = dataURL;
  document.body.appendChild(link);

  // 模拟点击下载
  link.click();

  // 清理
  document.body.removeChild(link);
}

// 调用截图下载函数，例如当用户点击某个按钮时
document.getElementById('downloadBtn').addEventListener('click', downloadScreenshot);

为了确保截图是当前视频播放的画面，可以在调用drawImage之前暂停视频并设置currentTime到想要截图的时间点，在截图完成后恢复视频的播放。

// 假设有一个按钮用于触发截图
document.getElementById('takeScreenshotBtn').addEventListener('click', function() {
  // 获取当前播放时间
  const currentTime = video.currentTime;

  // 暂停视频，防止继续播放影响截图内容
  video.pause();

  // 设置canvas尺寸与视频相同（如果尚未设置）
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  // 将视频当前帧绘制到canvas上
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // 立即执行截图下载操作
  downloadScreenshot(currentTime);
});

function downloadScreenshot(time) {
  // ...保持原有的downloadScreenshot函数不变...

  // 在文件名中包含时间戳（可选）
  let filename = `video_screenshot_${time}.jpg`;

  // 创建和点击下载链接
  // ...
}

// 截图完成后，可以根据需要恢复视频播放
downloadScreenshot(); // 调用时会传入currentTime

// 下载后恢复视频播放状态（假设用户希望继续播放）
video.play();