Запускайте холст анимацию и видео синхронно - PullRequest
Новая
       55

Запускайте холст анимацию и видео синхронно

1 голос
/ 23 марта 2020

Я хочу анимировать материал на холсте, используя метод window.requestanimationframe () поверх двух видео (например, для выделения важных вещей в обоих видео). В настоящее время анимация запускается, и после этого видео начинают воспроизводиться вместе. Так как я могу выполнить все (и видео, и анимацию холста) одновременно? 

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;
    }
}

Код для запуска видео и анимации холста: 

/**
* 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();
    }
}

Заранее спасибо :)

1 Ответ

1 голос
/ 23 марта 2020

Как отметил @Kaiido, вы должны прослушивать обновления в текущее время видео. Существует соответствующее медиа-событие - timeupdate. Кроме того, у вас должен быть список ключевых кадров видео, когда показывать вашу анимацию. Всякий раз, когда происходит событие timeupdate, проверьте текущее время достижения некоторого ключевого кадра и, если это так, уведомите свой обратный вызов requestanimationframe для запуска анимации через некоторую общую переменную.

...