使用工具
视频播放器API:西瓜播放器
截图:canvas
实现步骤
1. 创建 canvas 元素,创建 canvas 上下文对象
const canvas = document.createElement('canvas');
const canvasCtx = canvas.getContext('2d');
2. 获取 video 元素 DOM节点,在 React 中也可以使用 useRef 获取
const video = document.getElementById('mse')?.firstElementChild;
3. 设置 canvas 画布宽高(此处设置为画布宽高与视频宽高相同)
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
4. 使用 drawImage() 方法将视频画面画在 canvasCtx 上
drawImage() 参数介绍
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)</