Javascript 当设备上不允许自动播放时，用背景图像替换背景视频

有一个自动播放的背景图像，我正试图找出如何在不允许自动播放的设备上用图像替换它。tag POSTER元素似乎可以正常工作，但在我的iPhone上，它不允许自动播放视频，即使它根本没有被使用，它仍然可以下载视频。有更好的解决办法吗

自动播放检测帖子是答案的一部分，但我的问题有点不同，我在下面标出了答案

视频背景{ 位置：相对位置； 宽度：自动； 最小宽度：100%； 高度：自动； 背景：透明urlvideo-bg.jpg不重复； 背景尺寸：封面； 显示：块； } 录像带{ 显示：块； } .视频容器{ 宽度：100%； 最大高度：550px； 溢出：隐藏； 位置：静态； 排名：0； 右：0； z指数：-100； } .叠加说明{ 背景：rgba0,0,0,0； 位置：绝对位置； 顶部：0；右侧：0；底部：0；左侧：0； 显示器：flex； 对齐项目：居中； 证明内容：中心； } 您的浏览器不支持视频标记。请更新您的浏览器以享受本网站的全部功能。 韦恩的世界 首先，然后：

---

当然，当它加载后，他们必须再次单击它，因此您可能需要尝试和，这可能很棘手

我想你指的是iOS中的Safari，如果静音，应该允许自动播放。检查是否在视口中，否则，如果不在视口中，它将自动暂停。

$(function() {
    let $container = $('#top-banner-vid .video-container > .col');
    let $video = $.parseHTML('<video class="embed-responsive video-bg" poster="12-sunrise-picture.jpg" autoplay loop muted><source class="embed-responsive-item" src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">Your browser does not support the video tag. Please update your browser to enjoy the full features of this website.</video>');
    let $image = $.parseHTML('<img src="12-sunrise-picture.jpg"/>');

    function addVideo() {
        $container.append($video);
    }

    function addImage() {
        $container.append($image);
        $image.on('click', () => {
            $container.empty().append($video);
        });
    }

    if (autoplaySupported()) {
        addVideo();
    } else {
        addImage();
    }
}();