解决网页中的 video 标签在移动端浏览器(如百度访问网页)视频脱离文档流播放问题

问题现象

部分浏览器视频脱离文档流,滚动时,视频是悬浮出来,在顶部播放
在这里插入图片描述

解决方案

添加下列属性,可解决大部分浏览器的脱离文档流的问题

<videowebkit-playsinline=""playsInlinex5-playsinlinet7-video-player-type="inline"x5-video-player-type="h5-page"x-webkit-airplay="allow"disablePictureInPicture
><source src={src} type="video/mp4" />
</video>

最终效果

请添加图片描述

参考资料

  1. 几款优秀开源的HTML5 视频播放器
  2. muiplayer-推荐

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/46715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI辅助自动驾驶技术在2024年的发展与趋势

文章目录 综述 2024 年 AI 辅助研发趋势 第一章&#xff1a;引言 1.1 背景介绍 1.2 AI在自动驾驶中的地位和作用 1.3 2024年自动驾驶技术的现状 1.4 论文结构 第二章&#xff1a;AI技术在自动驾驶中的应用 2.1 深度学习算法在自动驾驶中的应用 2.2 数据分析与模式识别…

谷类大米农业行业网站源码系统 带完整的安装代码包以及搭建部署教程

系统概述 在当今数字化时代&#xff0c;农业行业也逐渐迈向信息化、智能化。为了满足谷类大米农业行业的信息化需求&#xff0c;我们推出了一款专为该行业设计的网站源码系统。该系统不仅具备丰富的行业特色功能&#xff0c;而且提供了完整的安装代码包以及详细的搭建部署教程…

【Java算法】前缀和 下

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【算法工作坊】算法实战揭秘 一.连续数组 题目链接&#xff1a;525.连续数组 代码 public int findMaxLength(int[] nums) {HashMap<Integer,Integer> mapnew HashMap<>();map.put(0,-1);…

Camera Raw:移去

Camera Raw 中的移去 Remove模块主要用于去除照片中的不需要的元素&#xff0c;比如污点、电线或其它干扰元素。 快捷键&#xff1a;B 移去面板中提供了三种移去模式&#xff1a;移除、修复以及仿制。 移除 Remove 通过智能算法和生成式 AI 来去除不需要的元素。 对象识别 Obje…

php 小白新手从入门到精通教程(第3版)

前言 PHP&#xff08;PHP: Hypertext Preprocessor&#xff09;即“超文本预处理器”&#xff0c;是在服务器端执行的脚本语言&#xff0c;尤其适用于Web开发并可嵌入HTML中。PHP语法学习了C语言&#xff0c;吸纳Java和Perl多个语言的特色发展出自己的特色语法&#xff0c;并根…

FastAPI 学习之路(五十二)WebSockets(八)接受/发送json格式消息

前面我们发送的大多数都是text类型的消息&#xff0c;对于text消息来说&#xff0c;后端处理出来要麻烦的多&#xff0c;那么我们可以不可以传递json格式的数据&#xff0c;对于前后端来说都比较友好&#xff0c;答案是肯定的&#xff0c;我们需要做下处理。 首先&#xff0c;…

云计算安全流程与管控要求的全面解析

华为云安全流程与管控要求的全面解析 引言 在云计算技术迅猛发展的背景下&#xff0c;云安全问题日益凸显其重要性。华为云作为行业的领军企业&#xff0c;其安全流程与管控要求不仅关乎自身的服务稳定性&#xff0c;更直接影响到广大用户的业务安全。本文将深入解析华为云的安…

InterSystems IRIS使用python pyodbc连接 linux环境,odbc驱动安装,DSN配置,数据源配置,linux中文不展示问题

1、官方文档 ODBC Installation and Validation on UNIX Systems | Using the InterSystems ODBC Driver | InterSystems IRIS for Health 2024.1 By default, a full ODBC installation is performed with a standard InterSystems installation. If you perform a custom i…

beego框架_golang web框架_使用介绍

beego简介 beego是一个用于快速开发Go应用的http框架&#xff0c;由Go语言方面的技术大牛设计。beego可以用来快速开发API、Web、后端服务等各种应用&#xff0c;是一个RESTful的框架&#xff0c;主要设计灵感来源于tornado、sinatra、flask这三个框架&#xff0c;但结合了Go本…

《Windows API每日一练》10.3 公用对话框

Windows最初发行时的主要目标之一就是提倡一种标准化的用户界面。对于公用菜单 项来说&#xff0c;这一目标实现得很快。几乎所有的软件制造商都采用了Alt-File-Open组合来打开 文件。但是&#xff0c;真正用来打开文件的对话框却经常很不一样。 从Windows 3.1开始&#xff0c…

【JVM基础02】——组成-程序计数器解读

目录 1- 引言&#xff1a;程序计数器1-1 程序计数器是什么&#xff1f;为什么用程序计数器&#xff1f;(What)(Why) 2- 核心&#xff1a;程序计数器的原理&#xff08;How&#xff09;2-1 使用 javap 查看程序计数器的作用2-2 多线程下程序计数器原理举例 3- 小结&#xff1a;什…

object-C 解答算法:移动零(leetCode-283)

移动零(leetCode-283) 题目如下图:(也可以到leetCode上看完整题目,题号283) 解题思路: 本质就是把非0的元素往前移动,接下来要考虑的是怎么移动,每次移动多少? 这里需要用到双指针,i 记录每次遍历的元素值, j 记录“非0元素值”需要移动到的位置; 当所有“非0元素值”都移…

vue3前端开发-小兔鲜项目-热门品牌推荐栏目

vue3前端开发-小兔鲜项目-热门品牌推荐栏目&#xff01;这一期内容&#xff0c;大家一定要认真的看完。因为&#xff0c;黑马官方教程视频里面老师没有讲这个&#xff0c;但是内容其实不难。只是按照之前的流程操作就行了。我把自己写好的代码分享给大家。做个参考demo。 第一步…

可用内存为什么可以超过实际内存

一、虚拟CPU和虚拟内存&#xff1a; 1、虚拟cpu&#xff1a; 利用进程机制&#xff0c;所有的现代操作系统都支持在同一时间来完成多个任务。尽管某个时刻&#xff0c;真实的CPU只能运行一个进程&#xff0c;但是从进程自己的角度来看&#xff0c;它会认为自己在独享CPU&…

安科瑞受邀参加2024年杭州建筑电气年会

24年7月4-5日&#xff0c;由杭州市土木建筑学会建筑电气专业委员会主办&#xff0c;中国联合工程有限公司&#xff0c;浙江省建设投资集团股份有限公司工程设计总院&#xff0c;大象建筑设计有限公司承办的2024年杭州建筑电气年会在杭州万华国际酒店隆重举办。杭州市各设计院所…

服务器数据恢复—RAID5阵列重建重建导致数据丢失的数据恢复案例

服务器数据恢复环境&故障&#xff1a; 一台服务器&#xff0c;有一组由5块硬盘组建的raid5磁盘阵列。 服务器在运行过程中一块有磁盘掉线&#xff0c;由于raid5阵列支持一块磁盘掉线的特性&#xff0c;服务器还在正常工作。不久之后服务器出现故障&#xff0c;管理员在不了…

【洁净室】压缩气体检测参考标准:悬浮粒子、微生物、水油检测

在洁净室&#xff0c;特别是达到ISO 5或更高级别的环境中&#xff0c;维护严格的污染控制是不可或缺的。其中&#xff0c;压缩气体的质量是一个至关重要的潜在污染源。为确保压缩气体不会引入损害洁净室完整性的微粒&#xff0c;适当的气体取样成为了一项核心任务。国际标准ISO…

C2W1.LAB.Vocabulary Creation+Candidates from String Edits

理论课&#xff1a;C2W1.Auto-correct 文章目录 Vocabulary CreationImports and DataPreprocessingCreate Vocabulary法1.集合法法2.词典加词频法Visualization Ungraded Exercise Candidates from String EditsImports and DataSplitsDelete Edit Ungraded Exercise 理论课&…

【中项第三版】系统集成项目管理工程师 | 第 5 章 软件工程① | 5.1 - 5.3

前言 第5章对应的内容选择题和案例分析都会进行考查&#xff0c;这一章节属于技术的内容&#xff0c;学习要以教材为准。 目录 5.1 软件工程定义 5.2 软件需求 5.2.1 需求的层次 5.2.2 质量功能部署 5.2.3 需求获取 5.2.4 需求分析 5.2.5 需求规格说明书 5.2.6 需求变…

C++写一个线程池

C写一个线程池 文章目录 C写一个线程池设计思路测试数据的实现任务类的实现线程池类的实现线程池构造函数线程池入口函数队列中取任务添加任务函数线程池终止函数 源码 之前用C语言写了一个线程池&#xff0c;详情请见&#xff1a; C语言写一个线程池 这次换成C了&#xff01;…