js+html手机端视频截屏

最新推荐文章于 2024-09-13 21:36:37 发布

rookieStruggling

最新推荐文章于 2024-09-13 21:36:37 发布

阅读量3.6k

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在运行这段代码的时候引用的视频一定要存储在本地，否则会报canvas.toDataURL()错

<html>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<head>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/canvas.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();
                $output.prepend(img);
            };
            $(initialize);
        }());

    </script>
</head>
<body bgcolor="#E6E6FA">
<video id="video" controls="controls">
    <source src="IMG_4438.mp4" />
</video>
<button id="capture">Capture</button>
<div id="output"></div>
</body>
</html>