有个需求是自动播放,但是在Android手机上正常播放,在iOS上就不播放
在移动设备上,尤其是在 iOS 设备上,视频的自动播放存在一些限制。为了使视频在 iOS 设备上自动播放,你需要确保以下几点:
确保视频是静音的:
iOS 设备上,只有静音的视频才能自动播放。你已经设置了 muted 属性,这是正确的做法。
使用 playsinline 属性:
在 iOS 上,playsinline 属性允许视频在页面内播放,而不是全屏播放,这是自动播放的另一个要求。
设置 autoplay 属性:
明确添加 autoplay 属性,确保浏览器知道你希望视频自动播放。
再片配合上一篇的视频懒加载,就非常完美
<video
ref={videoRef}
id="my-video"
className="video-js w-full"
loop
// controls={false}
preload="auto"
width="100%"
height="264"
muted
playsInline
autoPlay
data-setup="{}"
>
<source src={appConfig?.videoUrl} type="video/mp4" />
<p className="vjs-no-js">
To view this video please enable JavaScript, and consider
upgrading to a web browser that
<a
href="https://videojs.com/html5-video-support/"
target="_blank"
>
supports HTML5 video
</a>
</p>
</video>
总结
- muted:确保视频是静音的,这已经在你的代码中设置。
- playsInline:允许视频在页面内播放,而不是全屏播放。
- autoPlay:明确指定视频自动播放。