Question

我已经在一个新网站上工作了几天，而且我发现safari移动版不再支持自动播放视频。我已经在手机上检查了一下，几个月后我的视频出现了奇怪的行为。有些视频不再自动播放，而另一些视频则自动播放，但是播放器在上方。（我只能谈谈自己在IOS设备上的经历）。

是否想知道是否有其他方法可以通过使用其他方法长期解决此问题？

我只将自动播放视频用于循环播放的小型视频（最长15秒），但GIF图像的质量不够高。

希望此主题将帮助人们找到解决此问题的正确方法！

非常感谢您！ PS：我的英语不是很完美，我不是母语人士！

Answer 1

自苹果公司做出决定以来，您不能对此做太多事情。

一般而言，id建议不要在第一种情况下使用自动播放视频，因为它们会带来很高的性能，并且可能会给甚至不想播放视频的访问者造成困扰。尤其是当视频带有音频时，这会使每个用户都惊恐。

如果您在后台使用视频，则有两个选择：

您使用的是GIF，但是您已经注意到它的质量会降低
您使用Java脚本通知用户他应该在后台启用视频自动播放功能（这是Safari的设置）

对于第二个选项，我在互联网上找到了该解决方案：

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

来源：https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/

Answer 2

这是HTML 5视频自动播放政策。您无法自动播放带有声音的视频。

始终允许静音自动播放。

Answer 3

尝试：

<video autoplay>
  <source src="https://multicdn.synq.fm/projects/bb/56/bb56f28429b942c08dc5128e4b7ba48c/derivatives/videos/71/43/71439ccd73c74ecc8bbab7abd3bb98bc/mp4_1080/71439ccd73c74ecc8bbab7abd3bb98bc_mp4_1080.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
</video>

您可以在视频词旁边插入循环（如果需要），控件（用于搜索栏等），静音（如果需要）。

<video autoplay controls loop muted>

没有控件的示例：

<video autoplay loop muted>
  <source src="https://multicdn.synq.fm/projects/bb/56/bb56f28429b942c08dc5128e4b7ba48c/derivatives/videos/71/43/71439ccd73c74ecc8bbab7abd3bb98bc/mp4_1080/71439ccd73c74ecc8bbab7abd3bb98bc_mp4_1080.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
</video>

也请检出this。

网站上具有自动播放功能的视频？另类

3 个答案:

尝试：