html5视频截图实现

最新推荐文章于 2024-04-18 11:10:03 发布

vcxiaohan2

最新推荐文章于 2024-04-18 11:10:03 发布

阅读量1w

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/u011500781/article/details/52262817

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

请在这里查看示例 ☞ h5Cut示例

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">  
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>  
    <link rel="stylesheet" href="http://v3.faqrobot.org/hvb/com/css/reset.css?dev=1">  
  
    <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js?dev=1"></script>  
    <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/base.js?dev=1"></script>  
    <title>video</title>  
  
    <style>  
        body, html {  
            width: 100%;  
            height: 100%;  
        }  
        video {
            width: 400px;
        }
        canvas {
            width: 200px;
        }
    </style>  
</head>  
<body>  
    <video src="video.mp4" controls autoplay></video>
    <div class="cut">点击截屏</div>
    <canvas></canvas>  
<script>  
    ;$(function() {

        var $canvas = $('canvas');
        var $video = $('video');

        $canvas.attr({
            width: $video.width(),
            height: $video.height(),
        });
        $video[0].onloadstart = function(e) {
            console.log(e.srcElement.videoWidth);
            console.log(this.videoWidth);
        }
        var ctx = $canvas[0].getContext('2d');
        $('.cut').on('click', function() {
            var w = $video[0].videoWidth;//视频原有尺寸
            var h = $video[0].videoHeight;//视频原有尺寸

            $canvas.attr({
                width: w,
                height: h,
            });

            ctx.drawImage($video[0], 0, 0, w, h);
            var base64 = $canvas[0].toDataURL('images/png');
            console.log(base64);
        });
  
  
    });  
</script>  
</body>