Видео кадры Shake/Shaptutment при переводе видео HTML5 на холст во время анимации CSS ⇐ Javascript

[Anonymous]

Видео -кадры Shake/Заикание при рендеринге HTML5 -видео на холст во время анимации CSS
Я испытываю встряхивание/заикание видео в видео карусели, где видео визуализируется на холст, в то время как анимация CSS работает. Видео должно играть гладко, но вместо этого показывать визуальное джиттер и кадры кадров. непрерывная анимация CSS (

Код: Выделить всё

transform: translateY()

)
[*] Использует recesectionobserver для управления воспроизведением видео
[*] рендерирует видео кадры с использованием requestAnimationFrame

проблема
wies/stutter is stutter. Когда я отключаю анимацию CSS, видео играют гладко.

Код: Выделить всё

function setupCanvasVideoPlayer(container, video) {
const canvas = document.createElement('canvas');
canvas.className = 'video-canvas';
container.appendChild(canvas);

const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;

let animationId;
let isPlaying = false;

const renderFrame = () => {
if (!container.isConnected || !isPlaying) return;

ctx.clearRect(0, 0, canvas.width, canvas.height);
try {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
} catch (e) {
// Handle drawing errors
}
animationId = requestAnimationFrame(renderFrame);
};

video.addEventListener('play', () => {
isPlaying = true;
if (!animationId) {
animationId = requestAnimationFrame(renderFrame);
}
});
}

css animation:

Код: Выделить всё

.carousel-track {
animation: scrollVideos 20s linear infinite;
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0);
}

@keyframes scrollVideos {
0% { transform: translateY(0); }
100% { transform: translateY(-1760px); }
}

html -структура:

Код: Выделить всё

< /code>
 Что я попробовал < /h2>
[list]
[*]  [b] Оптимизация ускорения графического процессора: < /strong> < /p>
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0);

[*] Оптимизации Canvas: [/b]

Код: Выделить всё

ctx.imageSmoothingEnabled = false;
// Using requestAnimationFrame for rendering

[*] Позиционирование видеоэлемента:

Код: Выделить всё

video.style.visibility = 'hidden';
video.style.position = 'absolute';
video.style.pointerEvents = 'none';

[/list]
Вопросы

[*] Почему CSS -анимация вызывает видео, как я могу Shake? /> Существуют ли лучшие подходы для плавного воспроизведения видео в анимированных контейнерах?
[*] Должен ли я использовать Transform3d () вместо Translatey () для лучшей производительности? /> chrome : тяжелое встряхивание
[*] Firefox : умеренное встряхивание
[*] safari : использованное резервное изображение

ожидаемый результат


. Во время анимации каруселей. < /p>
фактический результат < /h2>
Видео, по -видимому, дрожат /заикается, создавая плохой пользовательский опыт. 115 +)
[*] Видео -формат: mp4
[*] Canvas 2D Context
[*] CSS Animations + requestAnimationFrame

Любая идея по разрешению этого Canvas + CSS Animation Animation Animation Brabrative Brab Brabired!>

Подробнее здесь: https://stackoverflow.com/questions/796 ... -css-anima