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:明确指定视频自动播放。
相关推荐
叽哥2 小时前
Flutter Riverpod上手指南
android·flutter·ios
用户091 天前
SwiftUI Charts 函数绘图完全指南
ios·swiftui·swift
YungFan1 天前
iOS26适配指南之UIColor
ios·swift
权咚2 天前
阿权的开发经验小集
git·ios·xcode
用户092 天前
TipKit与CloudKit同步完全指南
ios·swift
法的空间2 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
kaixin_啊啊2 天前
突破限制:Melody远程音频管理新体验
音视频
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
ai产品老杨2 天前
解锁仓储智能调度、运输路径优化、数据实时追踪,全功能降本提效的智慧物流开源了
javascript·人工智能·开源·音视频·能源
MThinker2 天前
02-Media-8-uvc_with_csc.py 使用硬件解码的USB摄像头(UVC)捕获视频并显示的程序
音视频·智能硬件·micropython·canmv·k230