4.11.2_在Canvas中播放视频

来源：互联网发布：网络实用技术基础作业1 编辑：程序博客网时间：2024/06/17 17:10

4.11.2_在Canvas中播放视频

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>在Canvas中播放视频</title>        <style>            body{                background: #eee;            }            #canvas{                background: #fff;                cursor: pointer;                margin-left: 20px;                margin-top: 20px;                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);            }            #video{                display: none;            }        </style>    </head>    <body>        <video id="video" poster>            <source src="video/mov_bbb.mp4"></source>            <source src="video/mov_bbb.ogg"></source>        </video>        <canvas id="canvas" width="720" height="405"></canvas>    </body>    <script>        var canvas = document.getElementById('canvas');        var context = canvas.getContext('2d');        var video = document.getElementById('video');        //video好像没有onload事件，之前写onload并不会触发        video.oncanplay = function(e){             video.play();            window.requestAnimationFrame(animate);        }        function animate(){            if(!video.ended){                context.drawImage(video,0,0,canvas.width,canvas.height);                window.requestAnimationFrame(animate);            }        }    </script></html>

0 0