Question

我将尺寸为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 kbps时，选取框速度是正常的。但是，如果视频比特率很高（高质量），则字幕会变慢。当视频比特率达到8000 kbps左右时，选框速度会大大降低，以至于以蜗牛的速度移动。我怎样才能解决这个问题？有什么办法让我知道视频的大小或视频的比特率，以便可以在选取框代码中增加step变量？

HTML5 Canvas上的视频放慢了字幕的速度

0 个答案: