在浏览器中重新缩放全屏视频的性能

时间:2018-07-04 12:12:23

标签: css3 html5-video

我正在使用css将视频缩放到视口的100%,这对我的gpu / cpu来说似乎很沉重,是否有什么方法需要较少的繁琐工作?我应该避免使用任何CSS属性吗?

<video  id="zynapp-bg-video" class="zynapp-bg-video" data-autoplay autoplay loop muted playsinline>
    <source data-src="/assets/video/vid-01.webm" type="video/webm">
    <source data-src="/assets/video/vid-01.mp4" type="video/mp4">
    <picture>
        <source srcset="images/poster-sm.jpg" media="(max-width: 767px)">
        <source srcset="images/poster.jpg">
        <img src="images/poster.jpg">
    </picture>
</video>


.zynapp-bg-video{
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

0 个答案:

没有答案