HTML5 видео останавливается при воспроизведении CSS анимации - PullRequest
Новая
       8

HTML5 видео останавливается при воспроизведении CSS анимации

0 голосов
/ 24 мая 2019

У меня есть HTML-тег видео с автовоспроизведением: 

<container>
    <video src="./images/grid.mp4" preload autoplay loop muted></video>
</container>

Автовоспроизведение действительно работает, но видео останавливается, если родительский элемент имеет CSS-анимацию: 

container {
    animation: RotateColor 7s ease infinite alternate-reverse;
}

@keyframes RotateColor { 
    0% {
        transform: scale(1);
        filter: hue-rotate(0deg);
    }
    100% {
        transform: scale(1.02);
        filter: hue-rotate(130deg);
    } 
}

Этопредполагаемое поведение?Разве я не могу использовать CSS-анимацию или фильтры при воспроизведении видео?

CSS-анимация DOES работает, когда я использую анимированный GIF в фоновом режиме, но я читал, что MP4 должна иметь намного лучшую производительность, чем GIF.

Если смотреть вбок, воспроизведение этого видео с другими элементами HTML поверх него заставляет моих поклонников ноутбуков крутиться как сумасшедшие, загрузка процессора достигает 90% ...Есть ли способ смягчить это?Я масштабирую небольшое видео (640 * 480) до 1440 * 900 на фоне сайта.Проблема в масштабировании?

Ответы [ 2 ]

2 голосов
/ 24 мая 2019

Вы не можете использовать предварительную загрузку и автозапуск, если я правильно знаю

Примечание. Атрибут предварительной загрузки игнорируется, если присутствует автозапуск.

Источник: w3schools

0 голосов
/ 26 мая 2019

Я пробовал использовать тот же набор анимаций, что и вы, и он работает нормально.

Я думаю, что атрибут playsinline (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline) может потребоваться при изменении размера элемента видео и может помочь здесь, если он не работает для вас.

...