视频处理

作者: 洛洛kkkkkk | 来源:发表于2017-04-20 19:27 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #myCanvas{
                border: 10px solid red;
                /*canvas的宽和高不能在样式表里设置*/
            }
        </style>
    </head>
    <body>
        <video id="video" width="800" height="">
            <source src="video.mp4" type="video/mp4"></source>
        </video>
        <canvas id="myCanvas" width="800" height="500"></canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.getElementById("myCanvas");
        var context = myCanvas.getContext("2d");
        
        var video = document.getElementById("video");
        
        video.oncanplay = function () {
            //可以播放了；
            video.play();
            setInterval(animate,30);
            video.style.display = "none";
        }
        
        function animate () {
            context.clearRect(0,0,myCanvas.width,myCanvas.height);
            context.drawImage(video,0,0);
            if(video.ended){
                return;
            }
        }

        
    </script>
</html>