Question

目标：在桌面视图中有视频背景，但随后使其无法在移动视图中加载和减慢网页速度。

在我走得太远之前，我很清楚iOS野生动物园不允许视频自动播放。

我用Adobe Muse的一个朋友创建了这个网站（是的，我知道它现在已经停产，但是为了没有时间学习新系统，它仍然可以运行）。我在网站上放置了以下代码，仅在高于768像素宽的分辨率下显示，因为自动播放的视频背景无法在iOS Safari中使用。

/* VIDEO BG */
.banner {
    height: 1080px;
    width: 100%;
    }
    
.banner {
    position: relative;
    overflow: hidden;
    }

.banner__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
    }

<div class="banner">
  <video autoplay loop muted preload="none" class="banner__video" poster="http://specialedit.com/beta/kbc/img/beer_bg_v2-01_vid_bg.jpg">
    <source src="http://specialedit.com/beta/kbc/assets/beer_bg3.webm" type="video/webm">
    <source src="http://specialedit.com/beta/kbc/assets/beer_bg3.mp4" type="video/mp4">    
  </video>
</div>

我的问题是，在移动设备（分辨率小于768px）中，视频文件要下载。 iOS Safari在下载过程中完全适合视频文件，并且在加载网站将近一分钟（显示白页）时中止。

问题：当隐藏在该断点（分辨率）时，iOS Safari为什么要下载此文件？以及我如何才能停止这样做呢？

我还尝试了this post中的以下代码，但未成功：

<!-- VIDEO MEDIA QUERY -->
<script>
$(function() {

    // onload
    if(document.body.clientWidth >= 768) {
        $('video').attr('autoplay', true);
    }

    // If you want to autoplay when the window is resized wider than X px 
    // after load, you can add this:

    $(window).resize(function() {
        if(document.body.clientWidth >= 768) {
            $('video').attr('autoplay', true);
        }
    });
});
</script>

此外，我的问题似乎与此post类似，除了他们试图使视频正常工作，而我只是想防止它破坏iOS Safari上该网站的移动版本。

>

使用背景gif链接到移动设备应具有的版本（请注意，桌面版本是静止图像，因为我必须完全删除移动设备才能正常工作）：

http://specialedit.com/beta/kbc

链接到可以在台式机上运行但移动设备在iOS Safari中停滞的版本：

http://specialedit.com/beta/kbc_broken

谢谢。

<video> webm文件使ios Safari停滞

0 个答案: