前端实现给视频播放器的画面截图

熊猫在哪

已于 2023-11-28 09:19:24 修改

阅读量783

点赞数 11

文章标签：前端音视频

于 2023-11-27 18:00:51 首次发布

本文链接：https://blog.csdn.net/pandafucker/article/details/134651272

版权

video标签没有直接截图的功能，需要借用canvas来完成

HTML

<video id="videoElement" controls autoplay width="100%" height="100%" muted></video>
<canvas id="myCanvas"></canvas>
<button onclick="shot()">截图</button>

Javascript

function shot() {
    const video = document.getElementById("videoElement");  
    const canvas = document.getElementById("myCanvas");  
    const context = canvas.getContext("2d");  
    const width = video.videoWidth;  
    const height = video.videoHeight;  
    canvas.width = width;  
    canvas. Height = height;  
    context.drawImage(video, 0, 0, width, height);  
    const dataUrl = canvas.toDataURL("image/png");  
    console.log(dataUrl);  //base64
}

返回base64格式