运行 canvas 动画和视频同步

Question

我想在两个视频之上使用 window.requestanimationframe() 方法为 canvas 上的内容制作动画（例如，突出显示两个视频中的重要内容）。目前，动画开始运行，之后视频开始一起播放。那么如何同时执行所有内容（视频和 canvas 动画）？

class Animation {

    constructor(canvas, data) {
        this.canvas = document.getElementById(canvas);
        this.ctx = this.canvas.getContext('2d');
        this.data = data;
        this.start = 0;
        this.counter = 0;
        this.running = false;

        this.draw = function(){
            console.log(this);
            console.log("Draw");
            if(!document.querySelector('video').playing){
                // init
                this.ctx.clearRect(0, 0, 300, 300); // clear canvas

                // get data
                var in_video_data = this.data['in_video'];

                // draw CircleLineTimeSeries
                for (var i=0; i<in_video_data.length; i++){
                    var item = in_video_data[i];
                    // if counter in phase intervall
                    if (this.counter >= item['start'] && this.counter <= item['end']){
                        console.log(item);
                        if (item['object'] == 'CircleLineTimeSeries'){
                            this.visualizeCircleLine(item['raw_kps'][0][this.counter],
                                                     item['raw_kps'][1][this.counter]);
                        }
                    }
                }

                // Increase time variable
                this.counter += 1;

            }
            if (this.running){
                window.requestAnimationFrame(this.draw.bind(this));
            }
        }
    }


    visualizeCircleLine(kps0, kps1){
        this.ctx.beginPath();
        this.ctx.moveTo(kps0[0], kps0[1]);
        this.ctx.lineTo(kps1[0], kps1[1]);
        this.ctx.stroke();
    }

    play(){
        this.running = true;
        window.requestAnimationFrame(this.draw.bind(this));
    }

    pause(){
        this.running = false;
    }
}

运行视频和canvas动画的代码：

/**
* Event handler for play button
*/
function playPause(){
    if (running){
        running = false;
        animation.pause();
        video0.pause();
        video1.pause();
    } else {
        running = true;
        animation.play();
        video0.play();
        video1.play();
    }
}

提前谢谢你:)

Answer 1

正如@Kaiido 指出的那样，您必须收听视频当前时间的更新。有相应的媒体事件 - timeupdate。此外，您应该有一个视频的关键帧列表，何时显示您的动画。每当 timeupdate 事件触发时，检查当前到达某个关键帧的时间，如果是，则通过某个共享变量将 requestanimationframe 回调通知给运行动画。

运行 canvas 动画和视频同步

Run canvas animation and video synchronously

javascript

canvas

html5-video

html5-canvas

requestanimationframe