问答详情
源自:5-3 使用图片、画布或者video

视频填充我测试了一下,一直失败,图片填充是可以的,但是视频填充要怎么弄呢?

如题,测试了video,embed,object视频好像都没有效果出来!

提问者:慕九州1311592 2016-07-06 19:20

个回答

  • 橙子111000
    2017-10-20 15:14:02

    var context = canvas.getContext('2d');
    var video = document.createElement('video');
    video.src = '吔屎吧梁非凡_x264压制.mp4';
    video.preload = 'preload';
    video.autoplay = 'autoplay';
    video.height = context.canvas.height;
    video.width = context.canvas.width;
    
    setInterval(function  () {
        var pattern = context.createPattern(video, 'no-repeat');
        context.fillStyle = pattern;
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
        pattern = null;
    
        //drowStar...这里执行其他绘画步骤
    
    }, 100);

    测试可用,setInterval的时间间隔尽量调大,不然电脑风扇会狂飙...

    楼上的方法应该更高效吧 XD

  • 蝴蝶飞不过沧海
    2016-07-09 17:11:43

    var can = document.getElementById('canvas');

    var ctx = canvas.getContext('2d');

    var video = document.getElementById('video');

    video.addEventListener('play', function(){

        can.width = video.clientWidth;

        can.height = video.clientHeight;

        var ths = $(this);

        (function loop(){        

            if(!ths.paused && !ths.ended){

                ctx.drawImage(ths, 0, 0);

                setTimeout(loop, 1000/30);

            }

        })();    

    }, false)