Question

我有一个具有自动播放功能的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动画或滤镜吗？

当我在背景中使用动画GIF时，CSS动画做可以工作，但是我读到MP4 应该的性能要比GIF好得多。< / p>

与侧面相关，将视频与其他html元素一起播放会导致我的笔记本电脑迷疯狂旋转，CPU占用90％...有什么方法可以减轻这种情况？我正在将网站背景中的小视频（640 * 480）缩放到1440 * 900。是缩放问题吗？

Answer 1

如果我知道正确的话，就不能同时使用预加载和自动播放

注意：如果存在自动播放功能，则会忽略preload属性。

来源：w3schools

Answer 2

我尝试了与您发布的动画相同的一组动画，并且效果很好。

我认为，在调整视频元素的大小时，可能需要playsinline属性（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline），如果它对您不起作用，可能会有所帮助。

当CSS动画播放时，HTML5视频停止播放

2 个答案: