video标签截取当前帧图

也是工作中的一个需求，需要在视频播放中截取当前帧的图片用来当做海报图或者封面图。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video id="video" controls="controls">
    <source src="../videos/小李子.mp4" />
</video>
<button id="capture">Capture</button>
<div id="output"></div>

<script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<script>
    (function() {
        "use strict";
        var video, $output;
        var scale = 0.25;
        var initialize = function() {
            $output = $("#output");
            video = $("#video").get(0);
            $("#capture").click(captureImage);
        };
        var captureImage = function() {
            var canvas = document.createElement("canvas");
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvas.getContext('2d')
                .drawImage(video, 0, 0, canvas.width, canvas.height);
            var img = document.createElement("img");
            img.src = canvas.toDataURL('image/png');
            $output.prepend(img);
        };
        $(initialize);
    }());
</script>
</body>
</html>

主要的方法就是captureImage ，video是当前需要截取的视频所在的标签。

大家可以用webstrom内置的服务器进行测试。

使用，谷歌浏览器需要一个服务器环境，否则canvas的toDataURL方法会报错。该方法是将其转换为base64格式的图片地址。

video标签截取当前帧图

猜你喜欢