video视频自动播放兼容IOS与Android

墨墨博客

于 2024-08-05 12:26:10 发布

阅读量1.9k

点赞数 7

分类专栏： javascript React 工具类文章标签：音视频 ios reactjs video 兼容

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/140923644

版权

有个需求是自动播放，但是在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
            au