[前端] canvas绘制视频

一、概要

 

<!--
视频地址：http://www.w3school.com.cn/example/html5/mov_bbb.*

用到的video事件： play  pause 和 ended
-->

 

 

二、HTML

 

<video id="video" controls width="270" autoplay>
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type='video/mp4'>
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type='video/ogg'>
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.webm" type='video/webm'>
</video>

<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

 

 

 

三、JAVASCRIPT 

 

<script type="text/javascript">

    var v = document.getElementById('video');
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');

    // 播放
    v.addEventListener('play', function() {
        var i = window.setInterval(function() {
            ctx.drawImage(v, 0, 0, 270, 135);
        }, 20);  // 每0.02秒画一张图片
    }, false);

    // 暂停
    v.addEventListener('pause', function() {
        window.clearInterval(i);  // 暂停绘画
    }, false);

    // 结束
    v.addEventListener('ended', function() {
        clearInterval(i);
    }, false)
</script>

 

四、效果

欢迎关注技术开发分享录：http://fenxianglu.cn/