Видео на HTML5 Canvas тормозит Marquee - PullRequest
Новая
       41

Видео на HTML5 Canvas тормозит Marquee

0 голосов
/ 17 декабря 2018

Я разделил холст размером 1024 * 748 на две равные половины.В одной половине - HTML5-видео, код которого приведен ниже 

videoElements[counter].addEventListener('loadeddata', function() {
    videoElements[counter].play();
    updateVideoFrames();
});

function updateVideoFrames(){
    videoCTX.drawImage(videoElements[counter], 0, 0, width, height);
    requestAnimationFrame(updateVideoFrames);
}

Во второй половине холста - текст выделенного текста, который в основном перемещается на один пиксель влево при каждом рекурсивном вызове через 20 миллисекунд.. 

function callMarqueeRL(textCTX, data, step, steps, xpos, ypos, width, height,

LocationX, LocationY, size, counterText) {
    DisplayTextRightToLeft();
    function DisplayTextRightToLeft() {
        step =  step - 1;
        textCTX.clearRect(0, 0, width, height);
        textCTX.fillText(data , step, parseFloat(size) + parseFloat(LocationY));
        if (step <= steps) {
            step = parseFloat(width) + parseFloat(20);
        }
        if (step > steps) {
            textElements[counterText] = setTimeout( function() { DisplayTextRightToLeft() }, 20);
        }
    }
}

Теперь проблема, с которой я сталкиваюсь, заключается в следующем.Когда скорость передачи видео составляет около 300 кбит / с, скорость выделения нормальная.Но если битрейт видео высокий (высокое качество), то шатер замедляется.Когда скорость передачи видео достигает 8000 кбит / с, скорость выделения замедляется до такой степени, что она движется со скоростью улитки.Как я могу это исправить?Могу ли я узнать размер видео или битрейт видео, чтобы я мог увеличить шаговую переменную в своем коде выделения?

...