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

有个需求是自动播放,但是在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:明确指定视频自动播放。
相关推荐
2401_865854884 小时前
iOS应用想要下载到手机上只能苹果签名吗?
后端·ios·iphone
我喜欢就喜欢6 小时前
基于qt vs下的视频播放
开发语言·qt·音视频
安步当歌6 小时前
【WebRTC】视频采集模块中各个类的简单分析
音视频·webrtc·视频编解码·video-codec
EasyGBS7 小时前
国标GB28181公网直播EasyGBS国标GB28181软件管理解决方案
大数据·网络·音视频·媒体·视频监控·gb28181
Johnstons10 小时前
AnaTraf | 网络性能监控系统保障音视频质量的秘籍
网络·音视频·网络流量监控·网络流量分析·npmd
lrlianmengba10 小时前
推荐一款非常好用的视频编辑软件:Movavi Video Editor Plus
音视频
SZ17011023110 小时前
ffplay 实现视频流中音频的延迟
音视频·延迟
LNTON羚通11 小时前
CPU算法分析LiteAIServer视频智能分析平台视频智能分析:抖动、过亮与过暗检测技术
大数据·目标检测·音视频·视频监控
MediaTea13 小时前
Pr 视频过渡:沉浸式视频 - VR 光线
音视频·vr
HackerTom16 小时前
iOS用rime且导入自制输入方案
ios·iphone·rime