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

embedded/2024/10/19 23:47:36/

有个需求是自动播放,但是在Android手机上正常播放,在iOS上就不播放

在移动设备上,尤其是在 iOS 设备上,视频的自动播放存在一些限制。为了使视频在 iOS 设备上自动播放,你需要确保以下几点:

确保视频是静音的:
iOS 设备上,只有静音的视频才能自动播放。你已经设置了 muted 属性,这是正确的做法。

使用 playsinline 属性:
在 iOS 上,playsinline 属性允许视频在页面内播放,而不是全屏播放,这是自动播放的另一个要求。

设置 autoplay 属性:
明确添加 autoplay 属性,确保浏览器知道你希望视频自动播放。

再片配合上一篇的视频懒加载,就非常完美

<videoref={videoRef}id="my-video"className="video-js w-full"loop// controls={false}preload="auto"width="100%"height="264"mutedplaysInlineautoPlaydata-setup="{}"><source src={appConfig?.videoUrl} type="video/mp4" /><p className="vjs-no-js">To view this video please enable JavaScript, and considerupgrading to a web browser that<ahref="https://videojs.com/html5-video-support/"target="_blank">supports HTML5 video</a></p></video>

总结

  • muted:确保视频是静音的,这已经在你的代码中设置。
  • playsInline:允许视频在页面内播放,而不是全屏播放。
  • autoPlay:明确指定视频自动播放。

http://www.ppmy.cn/embedded/93316.html

相关文章

树莓派智能语音助手之TTS - pyttsx3 + espeak

要让树莓派“开口说话”&#xff0c;就需要文字转语音的功能。起初选用Coqui-TTS&#xff0c;需要安装torch2.1&#xff08;因为TTS需要torch>2.1.0&#xff09;&#xff0c;结果没有找到现成的whl文件&#xff08;目前找到的torch可用版本是1.8&#xff09;&#xff0c;只能…

leetcode217. 存在重复元素,哈希表秒解

leetcode217. 存在重复元素 给你一个整数数组 nums 。如果任一值在数组中出现 至少两次 &#xff0c;返回 true &#xff1b;如果数组中每个元素互不相同&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1] 输出&#xff1a;true 示例 2&#x…

linux中如何查看是不是守护进程

linux中如何查看是不是守护进程在 Linux 中&#xff0c;要确定一个进程是否是守护进程&#xff0c;通常可以通过以下几个方面来进行判断&#xff1a;1. **检查进程是否与终端相关联**:- 使用 ps 命令查看进程的 TTY 列。- 守护进程通常没有控制终端&#xff0c;因此 TTY 列会显…

C# 高级数据处理:深入解析联接 Join 与 GroupJoin 操作的应用与实例演示

文章目录 一、联接概述二、Join 操作符1. Join 操作符的基本用法2. Join 操作符示例 三、GroupJoin 操作符1. GroupJoin 操作符的基本用法2. GroupJoin 操作符示例 总结 在数据处理中&#xff0c;联接&#xff08;Join&#xff09;操作是一种非常常见的需求&#xff0c;它允许我…

学习c语言第24天(练习)

编程题 第一题 最大公约数最小公倍数求和 //求最大公约数和最小公倍数之和 //暴力求解 //int main() //{ // int n 0; // int m 0; // while (scanf("%d %d", &n, &m)2) // { // int min n < m ? n : m; // int max n > m ? n : m; //…

PS网页版在线制作:云端设计让效率更上一层楼!

在当今的设计行业中&#xff0c;PS曾经被认为是不可替代的工具。然而&#xff0c;对于设计师&#xff0c;尤其是UI设计师来说&#xff0c;PS有点太复杂了。PS更新频率快&#xff0c;稳定性差&#xff0c;对计算机配置要求高。对于初学者来说&#xff0c;这显然是一个“负担”。…

MySQL里utf8mb4和utf8的区别

在MySQL中&#xff0c;utf8 和 utf8mb4 是两种常见的字符集&#xff0c;它们用于存储Unicode字符。尽管它们听起来相似&#xff0c;但存在一些关键的区别&#xff0c;这些区别对于支持某些特定字符&#xff08;如表情符号&#xff09;非常重要。 utf8 和 utf8mb4 的主要区别&a…

【SpringMVC】SpringMVC实现文件上传和下载

目录 1.文件上传 2.文件下载 1.文件上传 大概的图如下所示&#xff1a; 客户端&#xff1a; 文件上传就是把客户端的文件上传到服务端进行保存。在文件上传时文件和其他请求参数是在 请求体中进行传递。所以不支持 GET 类型请求。实现文件上传&#xff0c;需要提供一个上传的…