提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

H5 canvas如何载入视频

2023-04-18 14:42:34 时间

Canvas可以载入图片，那么Canvas 也可以载入视频。

Canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定

时器不停的抓取每帧的画面，放入Canvas画布里面。

示例1 ：

附上demo：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi">
        <meta charset="utf-8">
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            #Mycanvas {
                position: absolute;
                top: 0;
                left: 0;
            }

            #mvideo {
                position: absolute;
                top: 10%;
                left: 10%;
                width: 480px;
                height: 360px;
                margin: -180px 0 0 -240px;
            }
        </style>
    </head>

    <body>
        <canvas id="Mycanvas">

        </canvas>
        <video loop controls autoplay id="mvideo" >
            <source src="sintel.mp4" type="video/mp4"></source>
        </video>
    </body>
    <script>
        !(function(doc) {

            var Mycanvas = doc.getElementById("Mycanvas"),
                cont = Mycanvas.getContext("2d"),
                Myvideo = doc.getElementById("mvideo");
            cw = window.innerWidth;
            ch = window.innerHeight;
            Mycanvas.width = cw;
            Mycanvas.height = ch;
            Myvideo.addEventListener("canplay", function() {
                var cont2 = cerateCanvas(cw, ch).getContext("2d");
                draw(this, cont, cont2, cw, ch);
            }, false)

            function cerateCanvas(w, h) {
                var cr = doc.createElement("canvas");
                cr.width = w;
                cr.height = h;
                return cr;
            }
            function draw(v, c, c2, w, h) {
                if(v.paused || v.ended) {
                    cancelAnimationFrame(stop);
                    return false;
                }
                c2.drawImage(v, 0, 0, w, h);
                var idata = c2.getImageData(0, 0, w, h),
                    data = idata.data;
                for(var i = 0; i < data.length; i += 4) {
                    var r = data[i],
                        g = data[i + 1],
                        b = data[i + 2];
                    brightness = (3 * r + 4 * g + b) >>> 3;
                    data[i] = brightness;
                    data[i + 1] = brightness;
                    data[i + 2] = brightness;
                };
                idata.data = data;
                c.putImageData(idata, 0, 0);
                var stop = requestAnimationFrame(function() {
                    draw(v, c, c2, w, h);
                });
            }
        })(document)
    </script>

</html>

示例2 ：setInterval

附上代码：

<!DOCTYPE html>
<html>

    <body>
        <p>要使用的视频：</p>
        <video id="video1" controls width="270" autoplay src="sintel.mp4"></video>
        <p>画布（每 20 毫秒，代码就会绘制视频的当前帧）：</p>

        <canvas id="myCanvas" width="270" height="135"></canvas>
    </body>
    <script>
        var v = document.getElementById("video1");
        var c = document.getElementById("myCanvas");
        ctx = c.getContext('2d');

        v.addEventListener('play', function() {
            var i = window.setInterval(function() {
                ctx.drawImage(v, 0, 0, 270, 135)
            }, 20);
        }, false);
    </script>

</html>

示例3 ：requestAnimationFrame

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>

    <body>
        <div id="container">

        </div>
    </body>
    <script>
        !(function(doc) {
            var cont = doc.getElementById("container");
            var cw = window.innerWidth;
            var ch = window.innerHeight;

            var canvas = document.createElement('canvas');
            canvas.width = cw;
            canvas.height = ch;
            canvas.style.zIndex = 8;
            canvas.style.position = "absolute";
            cont.appendChild(canvas);
            var cont2D = canvas.getContext("2d");

            var video = document.createElement('video');
            video.preload = "auto";
            video.volume = 0.3;
            video.setAttribute('x-webkit-airplay', true);
            video.setAttribute('webkit-playsinline', true);
            video.setAttribute('webkit-playsinline', 'webkit-playsinline');
            video.src = 'video/nigg2.mp4';
            video.autoplay = "autoplay"; //是自动播放

            video.addEventListener("play", function() {
                draw(this, canvas, cont2D, cw, ch);
            }, false)

            function cerateCanvas(w, h) {
                var cr = doc.createElement("canvas");
                cr.width = w;
                cr.height = h;
                return cr;
            }

            function draw(v, c, c2, w, h) {
                if(v.paused || v.ended) {
                    cancelAnimationFrame(stop);
                    return false;
                }
                c2.drawImage(v, 0, 0, w, h);
                var stop = requestAnimationFrame(function() {
                    draw(v, c, c2, w, h);
                });
            }
        })(document)
    </script>

</html>

相关文章