html5视频截图实现

来源：互联网发布：js向下取整编辑：程序博客网时间：2024/06/16 08:26
请在这里查看示例 ☞ 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>
0 0