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

时间:2018-08-14 09:40:43

标签: html ios video html5-video autoplay

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

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

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

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

非常感谢您! PS:我的英语不是很完美,我不是母语人士!

3 个答案:

答案 0 :(得分:0)

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

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

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

  1. 您使用的是GIF,但是您已经注意到它的质量会降低
  2. 您使用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/

答案 1 :(得分:0)

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

始终允许静音自动播放。

答案 2 :(得分:0)

尝试:

<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