双video标签（一个为背景，一个屏幕居中展示）在各大浏览器中存在的问题：

移动端

一、安卓端：

1.华为自带浏览器：两个视频可以同时自动播放，但自动播放时默认都是静音播放。

2.百度浏览器：上方视频播放时第背景视频自动暂停，且上方视屏自动播放时也默认为静音播放。

3. QQ浏览器：上方视频播放时背景视频自动暂停，但上方视频自动播放时为有声播放。

4. UC浏览器：两个视屏可以同时自动播放，背景视频自动播放时为静音播放，上方视频为有声播放。

5. 360浏览器：首次加载时背景视频不会自动播放，上方视频自动播放，刷新页面两个视频均不自动播放。

6. vivo自带浏览器：视屏播放时层级问题失控，一个视频播放会遮挡另一个视频，播放视频的控件也是失控状态。

7. OPPO自带浏览器：视屏播放时层级问题失控，一个视频播放会遮挡另一个视频，播放视频的控件也是失控状态。

8. Chrome：两个视频可以同时自动播放，但自动播放时默认都是静音播放。

二、IOS端

1. safari浏览器：两个视频均不能自动播放，点击播放后自动全屏播放。

2. uc浏览器：两个视频均不能自动播放，点击播放后自动全屏播放。

3. qq浏览器：两个视频均不能自动播放，点击播放后自动全屏播放。

4. 百度浏览器：是按时间顺序播放，后载入的视频自动全屏播放，关闭后自动显示先载入的视频播放界面。

5. 360浏览器：两个视频均不自动播放，点击播放后自动全屏播放。

6. Chrome：两个视频均不能自动播放，点击播放后自动全屏播放。

PC端

1. Chrome浏览器：两个视频可以同时自动播放，但自动播放时默认都是静音播放。

2. Safari浏览器： 两个视频可以同时自动播放，但自动播放时默认都是静音播放。

hb端

1. hb端不能实现两个video标签同时播放，hb上只允许存在一个video实例。

总结：本次主要的侧重测试点为wap。hb端不可以，hb上只允许存在一个video实例；PC端由于设备原因，只测试了Chrome和Safari，两个浏览器都是两个视频可以同时自动播放，但自动播放时默认都是静音播放。

一个页面同时使用两个video标签自动播放在各个移动端浏览器存在的问题相关推荐

  1. 微信公众号网页 H5 video 标签自动播放

    目录 微信公众号网页 H5 video 标签自动播放 问题描述 解决方案 微信公众号网页 H5 video 标签自动播放 环境:微信公众号网页 需求:H5 video 标签自动播放视频 video 标 ...

  2. 解决微信浏览器video标签自动播放视频失效

    正常在浏览器好好的视频,在微信内置浏览器中点击播放全屏,样式也不一样,自动播放失效.罪魁祸首是微信把video标签都成微信规则的了.下面方式可以解决视频播放全屏以及不能自动播放的问题. <vid ...

  3. html5的video标签自动播放处理方法

    网上有很多解决方案,都不能真正的解决问题,于是自己尝试了一下. video 标签属性 src: 设置显示视频路径 controls: 显示控制栏 loop: 控制视频循环播放 autoplay: 自动 ...

  4. html手机不能自动播放音乐,解决移动端浏览器 HTML 音频不能自动播放的三种方法...

    由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播放音频视频,默认屏蔽了autoplay,如果要想达到自动播放效果,需要单独处理,方法有以下几种: 第一种:添 ...

  5. python 打开网页自动播放视频_html5的video标签自动播放

    JMeter使用文档 JMeter使用文档 1.JMeter安装步骤 1.1Windows环境 a.安装jdk(对应windows系统位数) http://www.oracle.com/technet ...

  6. java提交数据到另一个页面_JS实现把一个页面层数据传递到另一个页面的两种方式...

    由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递 ...

  7. 微信内置浏览器video标签自动全屏播放以及层级过高问题

    转载自:微信内置浏览器video标签自动全屏播放以及层级过高问题 - 程序员大本营 今天事用html5的<video>标签做微信内置浏览器视频播放页面时,需要在视频层级上显示类似弹幕的对话 ...

  8. Android 一个页面上下两个ListView的页面显示

    Android 一个页面上下两个ListView,当上面的ListView过长时,下面的List基本没有了滑动空间,查阅网上资料,解决办法基本是采用ScrollView做页面滑动,notifyData ...

  9. vue一个页面用两个以上页面 时时刷新

    vue一个页面用两个以上页面刷新 <template><el-tabs v-model="activeName" style="padding-left ...

最新文章

  1. linux环境OpenRASP使用教程,OpenRASP技术分析
  2. kFeedback开源啦
  3. 直面桌面云带来的现状优势
  4. Dvbbs 7.1论坛鼠标指针修改方法
  5. 文件管理服务器数据库,Oracle数据库服务器参数文件管理教程
  6. OpenCV Mat主要用法(1)
  7. oracle12c 新增维护时间窗口,ORACLE 12C新特性-自动维护全局索引 | 信春哥，系统稳，闭眼上线不回滚！...
  8. Java中导入Excel文件
  9. C#下的Raw Socket编程实现网络封包监视
  10. 计算机办公软件知识,计算机办公软件基础知识1
  11. 基于Transformers+CNN/LSTM/GRU的文本分类
  12. 使用TensorFlow在Transformers 上生成字幕的注意机制的实现
  13. 机器学习算法 之 逻辑回归算法
  14. 常用的条形码类型以及如何选择条码类型、条形码字体和条形码控件
  15. Linux 程序性能分析与优化
  16. 【原创】PHP 邮件自动发送（QQ邮箱）
  17. Math.cbrt() Math.sqrt() Math.pow()
  18. 公司监事会的职责具体是什么
  19. 09组团队项目-Beta冲刺-1/5
  20. Mysql密码忘记怎么修改？

热门文章

  1. linux fsck ntfs,fsck找不到 fsck.ntfs
  2. Spring Boot 内嵌容器Undertow参数设置
  3. 天天预约 | 2022年11月产品更新
  4. uni-app结合原生混合开发
  5. Tailwind Navbar
  6. java 更改 常量池_JVM中三个常量池（两种常量池）的解析及其随jdk版本的变化
  7. 用FastJson将JSON字符串转Json
  8. 酷q插件开发Java_如何使用Java开发QQ机器人 方法一
  9. php5.4 move_uploaded_file,php 文件上传 move_uploaded_file_PHP教程
  10. Android_学习系列(33)--App应用之提交到各大市场渠道