ios iPhone上的HTML5视频自动播放

bihw5rsg  于 2023-06-07  发布在  iOS
关注(0)|答案(7)|浏览(372)

我有个奇怪的问题。我尝试创建一个带有循环背景视频的网站。代码看起来像这样:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

这在大多数浏览器上都能很好地工作(IE很难适应这个对象,但我不介意),但在iPhone上,视频不会自动播放,但在iPad上它可以。我已经读过New Policies for iOS了,我认为我符合要求(否则iPad不会自动播放)。我做了一些其他的测试:

  • 移除重叠的div无法修复它
  • 删除z-index不会修复它
  • 无线网或Hive网没有区别
  • 视频文件的大小也没有什么区别

是我做错了,还是iPhone根本不会自动播放视频,总是需要互动?我只关心iOS10,我知道iOS9上的要求不同

7cjasjjr

7cjasjjr1#

playsinline属性有帮助吗?
这是我的资料

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

请参阅关于playsinline的评论:https://webkit.org/blog/6784/new-video-policies-for-ios/

2eafrhcq

2eafrhcq2#

iOS 10+允许视频自动播放内联。但是你必须关闭iPhone上的“低功耗模式”。

62lalag4

62lalag43#

这里是一个小技巧,可以克服你在网站中自动播放视频的所有困难:
1.检查视频是否正在播放。
1.在身体点击或触摸等事件上触发视频播放。
注意:某些浏览器不允许视频自动播放,除非用户与设备进行交互。
因此,检查视频是否正在播放的脚本是:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

然后,您可以通过将事件侦听器附加到主体来自动播放视频:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

注意:autoplay属性是非常基本的,需要添加到视频标签中,而不是这些脚本。
您可以在此链接中看到包含代码的工作示例:
How to autoplay video when the device is in low power mode / data saving mode / safari browser issue

vd2z7a6w

vd2z7a6w4#

我遇到了类似的问题,我尝试了多种解决方案。我解决了这一问题,实施了两个考虑。
1.使用dangerouslySetInnerHtml嵌入<video>代码。例如:

<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
    </video>`}}
/>

1.调整视频权重。我注意到我的iPhone无法自动播放超过3兆字节的视频。因此,我使用了一个在线压缩工具(https://www.mp4compress.com/)将4 MB压缩到小于500 kb
同时,感谢@boltcoder的指导:Autoplay muted HTML5 video using React on mobile (Safari / iOS 10+)

uemypmqf

uemypmqf5#

我也遇到了同样的问题-视频无法在iOS上播放。我尝试了所有的代码选项“playsinline自动播放循环静音”。问题是我收到的视频是在错误的mp4编解码器。所以什么帮助我们,是上传视频到Vimeo和下载高清版本再次.视频现在正在所有移动的设备上播放。
你也可以尝试使用mpeg streamclip。这是VLC的屏幕截图-这些是正确的设置。希望有人不必花2个小时寻找问题-节日快乐

hujrc8aj

hujrc8aj6#

抱歉,回答晚了,但今天我发现你需要关闭iPhone上的电池节省功能才能自动播放视频。

7vhp5slm

7vhp5slm7#

这里是一个简单的解决方案,自动播放视频在IOS,我已经尝试过,它是完美的工作在IOS,Android,也对所有的浏览器在各种平台上.
只需对视频使用(data-wf-ignore)和(data-object-fit)属性,对源标签使用data-wf-ignore。
您可以在以下代码段看到工作示例:

<video id="myVideo" autoplay="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" data-wf-ignore="true" />
</video>

相关问题