首页 > 其他分享 >video视频自动播放兼容IOS与Android

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

时间:2024-08-05 12:26:55浏览次数:16  
标签:视频 IOS iOS video 自动播放 播放 属性

有个需求是自动播放,但是在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:明确指定视频自动播放。

标签:视频,IOS,iOS,video,自动播放,播放,属性
From: https://blog.csdn.net/wangweiscsdn/article/details/140923644

相关文章

  • 【arxiv 2024】VideoGPT+: Integrating Image and Video Encoders for Enhanced Video
    【arxiv2024】VideoGPT+:IntegratingImageandVideoEncodersforEnhancedVideoUnderstanding一、前言Abstract1Introduction2RelatedWorks3Method4Dataset5ProposedBenchmark6Experiments7Conclusion8QualitativeResults9AdditionalImplementation......
  • Video Encoder LowLatency模式
    低延迟模式(LowLatencyMode)在视频编码器中是一种优化设置,旨在减少编码和解码过程中的延迟,使视频能够尽快传输和播放。这种模式特别适用于实时应用,例如视频会议、游戏流媒体和直播等。主要用途视频会议:确保与会者之间的对话具有最小的延迟,使交流更自然和流畅。游戏流媒体:......
  • 自定义导航栏兼容ios和android
    <template>  <view class="content">    <!--距离顶部的距离刚好留出状态栏即可即statusBarHeight-->    <view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">      <......
  • 教你如何使用Windows电脑对IOS手机上的网页进行调试
    前期准备PC端安装Chrome浏览器。苹果手机一部。连接电脑数据线一条。梯子。PC端安装iTunes或者爱思助手。苹果手机设置打开“设置”→找到“Safari浏览器”点击进去→往下滑找到“高级”进行点击→打开“Web检查器”。电脑配置步骤安装scoop 搜索PowerShell并使用管理......
  • 五级分销版蝶影全网VIP影视 APP源码 安卓+苹果iOS双端+搭建教程
    ###五级分销版蝶影全网VIP影视APP源码安卓+苹果iOS双端+搭建教程在数字娱乐的浪潮中,影视APP成为了人们生活中不可或缺的一部分。随着技术的不断进步,定制化的影视APP源码成为了市场上的新宠。本文将详细介绍一款名为“蝶影”的全网VIP影视APP源码,它支持五级分销模式,并提供......
  • (Javaweb)Ajax,Axios,Vue
    目录一.Ajax 二.Axios 三.前端工程化四.接口文档的管理平台YAPI五.Vue项目六.Vue项目开发流程一.Ajax 1.通过Ajax从服务器端获取数据Ajax---JavaScript(网页行为)+XML(标记语言--用来存储数据) 客户端--浏览器 服务端在处理逻辑的时候,客户端处于等待状态等......
  • 【iOS】——NSOperation和NSOperationQueue学习总结
    NSOperation、NSOperationQueue简介NSOperation、NSOperationQueue是基于GCD更高一层的封装,完全面向对象。但是比GCD更简单易用、代码可读性也更高。NSOperation、NSOperationQueue的优点可添加完成的代码块,在操作完成后执行。添加操作之间的依赖关系,方便的控制......
  • iOS开发基础146-深入解析WKWebView
    WKWebView是苹果在iOS8中引入的重要组件,它替代了UIWebView,为开发者提供了高性能、高稳定性的网页显示和交互能力。在本文中,我们将深入探讨WKWebView的底层架构、关键特性、使用方法和高级功能。一、WKWebView的底层架构WKWebView基于WebKit框架,采用多进程架构,将页面渲染和JavaS......
  • 怎么配置一个axios来拦截前后端请求
    首先创建一个axios.js文件导入我们所需要的依赖importaxiosfrom"axios";importElementfrom'element-ui'importrouterfrom"./router";设置请求头和它的类型和地址注意先注释这个url,还没有解决跨域问题,不然会出现跨域//axios.defaults.baseURL="http://loc......
  • 易优CMS模板标签videoplay视频播放
    [基础用法]标签:videoplay描述:视频播放标签,用于视频模型的内容页,调用后台上传的视频。提示:如果后台上传的视频有多个选集,可以使用【videolist视频列表】标签,进行视频切换播放。用法:{eyou:videoplayaid='文档ID'autoplay='on'id='video'}<video{$video.id}width="100%"......