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:明确指定视频自动播放。
相关推荐
鸿蒙布道师16 分钟前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
刘小哈哈哈2 小时前
封装了一个iOS多分区自适应宽度layout
macos·ios·cocoa
Yeauty5 小时前
Rust 中的高效视频处理:利用硬件加速应对高分辨率视频
开发语言·rust·ffmpeg·音视频·音频·视频
布多6 小时前
Tagged Pointer:苹果工程师的内存优化艺术
ios·源码
winfredzhang7 小时前
Python视频标签工具详解:基于wxPython和FFmpeg的实现
python·ffmpeg·音视频·视频标签
EasyNVR7 小时前
视频分析设备平台EasyCVR视频结构化AI智能分析:筑牢校园阳光考场远程监控网
网络·音视频
Rudon滨海渔村8 小时前
新旧iPhone相册复制 - 相册图片视频对拷 - 换机 - 迁移设备数据 - 免费开源爱思助手
ios·iphone
zhslhm17 小时前
Moo0 VideoResizer,简单高效压缩视频!
音视频·视频压缩技巧·视频文件瘦身·数字媒体优化
花落已飘19 小时前
音视频基础(音视频的录制和播放原理)
音视频
9527华安20 小时前
Xilinx系列FPGA实现HDMI2.1视频收发,支持8K@60Hz分辨率,提供2套工程源码和技术支持
fpga开发·音视频·8k·hdmi2.1