Question

我们使用的是循环播放的mp4视频（以节省加载时间），而不是使用真实的gif

但是，即使使用autoplay loop muted playsinline，Safari也拒绝自动播放视频。

有没有一种方法可以创建不需要大文件大小且可以在移动设备中自动播放的循环视频/ gifs

我的视频标签如下：

<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
            <source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
                Your browser does not support video tag
</video>

也尝试过：

 <video preload autoplay muted playsinline loop>
                <source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
                    Your browser does not support video tag
    </video>

在某些情况下，我希望gif在用户滚动到特定点时开始。所以我用：

if (/* user scrolls to div */){
   document.getElementById('my-video').play();
}

是否可以通过Safari或其他最佳做法来自动播放视频？

Answer 1

您的HTML5实际上可以与其他源视频一起正常工作-以下内容可以在Mac OSX 10.14.5的Safari 12.1.1中运行：

<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
            <source src= 'http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov'>
                Your browser does not support video tag
</video>

您所使用的视频源或网络或服务器可能存在问题-例如，加载速度非常慢，而我直接对其进行测试时无法在Chrome或Safari中播放

如果另一个视频遇到相同的问题，则可能是以前已经出现过格式问题，或者存在某些服务器到Safari的指示问题，尽管目前根本原因尚不清楚： Safari 9.0 can not play mp4 video on the storage server

无论哪种方式，上面的原始HTML5都没有明显的错误。

对于iOS，有一些特定的自动播放规则-在撰写本文时，这些是最新的AFAIK（https://webkit.org/blog/6784/new-video-policies-for-ios/）：

默认情况下，WebKit将具有以下策略：

在Safari和IOS中使用“ Gif”：视频不会自动播放

1 个答案: