视频处理

<!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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容