当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/weixin_40795574/article/details/140471850 2024/11/19 20:21:22

问题现象

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

解决方案

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

<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-推荐

相关文章：

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

问题现象 部分浏览器视频脱离文档流&#xff0c;滚动时&#xff0c;视频是悬浮出来&#xff0c;在顶部播放 解决方案 添加下列属性&#xff0c;可解决大部分浏览器的脱离文档流的问题 <videowebkit-playsinline""playsInlinex5-playsinlinet7-video-player-t…...

编程日记 2024/7/20 1:03:11

.Net--CLS，CTS，CLI，BCL，FCL

1.什么是CLS&#xff1f; 所以.NET专门为此参考每种语言(例如C# &#xff0c;VB&#xff0c;F#)并找出了语言间的共性&#xff0c;然后定义了一组规则&#xff0c;开发者都遵守这个规则来编码&#xff0c;那么代码就能被任意.NET平台支持的语言所通用。 而与其说是规则&#x…...

编程日记 2024/7/20 1:02:10

Stable Diffusion：质量高画风清新细节丰富的二次元大模型二次元插图

今天和大家分享一个基于Pony模型训练的二次元模型&#xff1a;二次元插图。关于该模型有4个不同的分支版本。 1.5版本&#xff1a;loar模型&#xff0c;推荐底模型niji-动漫二次元4.5。 xl版本&#xff1a;SDXL模型版本 mix版本&#xff1a;光影减弱&#xff0c;减少SDXL版本…...

编程日记 2024/7/20 0:59:04

数读MEME之争：以太坊获更高价值共识，抢占热点成Solana流量密码

在当前显著的加密牛市中&#xff0c;以太坊和Solana之间的竞争不仅在币价表现上显而易见&#xff0c;生态发展方面也备受关注。特别是在这轮MEME行情中&#xff0c;双方阵营的MEME代币呈现出不同的特点和趋势。 市场表现对比 以太坊的优势&#xff1a; 市场份额和认可度更高&…...

编程日记 2024/7/20 0:58:01

python的with语句

1.with语句的作用 在 Python 中&#xff0c;with 语句用于创建一个上下文管理器&#xff0c;以更简洁和安全的方式管理资源。 其主要优点是可以确保在代码块执行完毕后&#xff0c;相关资源能够被正确释放或清理&#xff0c;即使在代码块内部发生了异常。 以下是一个使用 with…...

编程日记 2024/7/20 0:57:00

Selenium原理深度解析

在自动化测试领域&#xff0c;Selenium无疑是最受欢迎和广泛使用的工具之一。它支持多种浏览器和操作系统&#xff0c;为开发人员和测试人员提供了强大的自动化测试解决方案。本文将深入探讨Selenium的工作原理&#xff0c;包括其架构、核心组件、执行流程以及它在自动化测试中…...

编程日记 2024/7/20 0:54:57

算法复杂度＜数据结构 C版＞

什么是算法复杂度&#xff1f; 简单来说算法复杂度是用来衡量一个算法的优劣的&#xff0c;一个程序在运行时&#xff0c;对运行时间和运行空间有要求&#xff0c;即时间复杂度和空间复杂度。 目录 什么是算法复杂度&#xff1f; 大O的渐近表达式 时间复杂度示例 空间复杂度…...

编程日记 2024/7/20 0:52:55

【XSS】

文章目录 0x01 简介0x02 XSS Payload用法XSS攻击平台及调试JavaScript 0x03 XSS绕过XSS漏洞防御策略 跨站脚本攻击&#xff0c;Cross Site Script。&#xff08;重点在于脚本script&#xff09; 有关XSS可以造成的 危害&#xff0c;见 0x02 XSS Payload用法 分类 反射型、存储…...

编程日记 2024/7/20 0:45:47

Go网络编程-RPC程序设计

gRPC 通信 RPC 介绍 RPC, Remote Procedure Call&#xff0c;远程过程调用。与 HTTP 一致&#xff0c;也是应用层协议。该协议的目标是实现&#xff1a;调用远程过程&#xff08;方法、函数&#xff09;就如调用本地方法一致。 如图所示&#xff1a; 说明&#xff1a; Servi…...

编程日记 2024/7/20 0:44:46

Linux 性能优化：轻松入门

文章目录 前言一、磁盘性能优化1、 磁盘 RAID 模式选择2、文件系统优化 二、优化 CPU1、性能监控 &#xff1a;2、进程优先级调整 &#xff1a;3、进程与 CPU 绑定 &#xff1a; 三、优化内存四、网络性能优化1、调整 TCP 缓冲区大小2、修改系统级别的文件描述符的数量3、调整 …...

编程日记 2024/7/20 0:42:44

C++相关概念和易错语法（22）（final、纯虚函数、继承多态难点）

1.final final在继承和多态中都可以使用&#xff0c;在继承中是指不想将自己被继承&#xff0c;在多态中是指不想该函数被重写&#xff0c;比较简单&#xff0c;下面是一些使用例子。 2.纯虚函数 当我们需要抽象一个类的时候&#xff0c;我们就需要用到纯虚函数。所谓抽象的类…...

编程日记 2024/7/20 0:40:42

状态管理的艺术：探索Flutter的Provider库

状态管理的艺术&#xff1a;探索Flutter的Provider库 前言 上一篇文章中&#xff0c;我们详细介绍了 Flutter 应用中的状态管理&#xff0c;以及 StatefulWidget 和 setState 的使用。 本篇我们继续介绍另一个实现状态管理的方式&#xff1a;Provider。 Provider优缺点 基…...

编程日记 2024/7/20 0:39:41

玩转HarmonyOS NEXT之IM应用首页布局

本文从目前流行的垂类市场中&#xff0c;选择即时通讯应用作为典型案例详细介绍HarmonyOS NEXT的各类布局在实际开发中的综合应用。即时通讯应用的核心功能为用户交互&#xff0c;主要包含对话聊天、通讯录&#xff0c;社交圈等交互功能。 应用首页 创建一个包含一列的栅格布…...

编程日记 2024/7/20 0:35:38

GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建

原文链接&#xff1a;GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247608565&idx3&snd4e9d447efd82e8dd8192f7573886dab&chksmfa826912cdf5e00414e01626b52bab83a96199a6bf69cbbef7f7fe…...

编程日记 2024/7/20 0:31:34

记录些MySQL题集（4）

1、数据库的三范式是什么&#xff1f; 第一范式&#xff1a;列不可再分 第二范式&#xff1a;在第一范式的基础上&#xff0c;要求数据库表中的所有非主键列完全依赖于主键&#xff0c;而不是仅依赖于主键的一部分 第三范式&#xff1a;满足第二范式的基础上&#xff0c;所有…...

编程日记 2024/7/20 0:29:32

pdf提取其中一页怎么操作？提取PDF其中一页的方法

pdf提取其中一页怎么操作&#xff1f;需要从一个PDF文件中提取特定页码的操作通常是在处理文档时常见的需求。这种操作允许用户选择性地获取所需的信息&#xff0c;而不必操作整个文档。通过选择性提取页面&#xff0c;你可以更高效地管理和利用PDF文件的内容&#xff0c;无论是…...

编程日记 2024/7/20 0:26:29

godot使用ws

go服务端 package mainimport ("encoding/json""fmt""github.com/gorilla/websocket""net/http" )var upgrader websocket.Upgrader{ReadBufferSize: 1024,WriteBufferSize: 1024, }// 处理函数 func handleWebSocket(w http.Respo…...

编程日记 2024/7/20 0:23:26

Windows FFmpeg 开发环境搭建

FFmpeg 开发环境搭建 FFmpeg命令行环境搭建使用FFmpeg官方编译的库Windows编译FFmpeg1. 下载[msys2](https://www.msys2.org/#installation)2. 安装完成之后,将安装⽬录下的msys2_shell.cmd中注释掉的 rem set3. 修改pacman 镜像源并安装依赖4. 下载并编译源码 FFmpeg命令行环境…...

编程日记 2024/7/20 0:21:23

链路聚合概述

目录 技术背景&#xff1a; 基本概念&#xff1a; 链路聚合的工作模式&#xff1a; 简介&#xff1a; 1&#xff09;Manual Load-balance&#xff08;手动负载分担&#xff09; 简介&#xff1a; 配置实施&#xff1a; 2&#xff09;LACP&#xff08;链路聚合控制协议&#xff…...

编程日记 2024/7/20 0:16:17

【链表】算法题（二） ----- 力扣/牛客

一、链表的回文结构 思路&#xff1a; 找到链表的中间节点&#xff0c;然后逆置链表的后半部分&#xff0c;再一一遍历链表的前半部分和后半部分&#xff0c;判断是是否为回文结构。 快慢指针找到链表的中间节点 slow指针指向的就是中间节点 逆置链表后半部分 逆置链表后半部分…...

编程日记 2024/7/20 0:15:16

合成复用原则

合成复用原则 (Composite Reuse Principle, CRP) 合成复用原则&#xff08;Composite Reuse Principle, CRP&#xff09;&#xff0c;也被称为组合/聚合复用原则&#xff0c;是面向对象设计中的一条重要原则。它的核心思想是&#xff1a;优先使用对象组合/聚合&#xff0c;而不…...

编程日记 2024/7/20 0:12:14

安卓自带camera hal3 实例README.md翻译

最近&#xff0c;遇到一个这样的问题&#xff0c;临时了解下这个驱动实现架构和特点&#xff0c;翻译如下 V4L2相机HALv3 camera.v4l2库使用视频Linux 2&#xff08;V4L2&#xff09;接口实现了camera HAL v3。这使得它在理论上可以与各种设备配合使用&#xff0c;尽管V4L2的…...

编程日记 2024/7/20 0:11:12

ActiViz实战：ActiViz中的自己实现鼠标双击事件

文章目录 1、添加鼠标事件2、网上实现双击事件的方式3、增加双击的时间限制4、补充说明1、添加鼠标事件 已知在C#中观察者/命令模式会报错，正常添加鼠标事件如下： private void VtkInteractorStyleTest() {vtkInteractorStyle style = vtkInteractorStyle.New();style.LeftB…...

编程日记 2024/7/20 0:10:11

Linux-交换空间（Swap）管理

引入概念 在计算机中&#xff0c;硬盘的容量一般比内存大&#xff0c;内存&#xff08;4GB 8GB 16GB 32GB 64GB…&#xff09;&#xff0c;硬盘&#xff08;512GB 1T 2T…&#xff09;。 冯诺依曼的现代计算机结构体系里面的存储器就是内存 内存是一种易失性存储器&#xff0c…...

编程日记 2024/7/20 0:09:10

扫描某个网段下存活的IP：fping

前言&#xff1a; 之前用arp统计过某网段下的ip&#xff0c;但是有可能统计不全。网络管理平台又不允许登录。想要知道当前的ip占用情况&#xff0c;可以使用fping fping命令类似于ping&#xff0c;但比ping更强大。与ping需要等待某一主机连接超时或发回反馈信息不同&#x…...

编程日记 2024/7/20 0:07:09

【深度学习】PyTorch框架(3)：优化与初始化

1.引言 在本文中&#xff0c;我们将探讨神经网络的优化与初始化技术。随着神经网络深度的增加&#xff0c;我们会遇到多种挑战。最关键的是确保网络中梯度流动的稳定性&#xff0c;否则可能会遭遇梯度消失或梯度爆炸的问题。因此&#xff0c;我们将深入探讨以下两个核心概念&a…...

编程日记 2024/7/20 0:06:08

Go-知识测试-子测试

Go-知识测试-子测试 1. 介绍2. 例子3. 子测试命名规则4. 选择性执行5. 子测试并发6. testing.T.Run7. testing.T.Parallel8. 子测试适用于单元测试9. 子测试适用于性能测试10. 总结10.1 启动子测试 Run10.2 启动并发测试 Parallel 建议先看&#xff1a;https://blog.csdn.net/a…...

编程日记 2024/7/20 0:05:07

.net core IConfiguration 读 appsettings.json 数据，举例

在.NET Core中&#xff0c;IConfiguration 接口是用来读取配置数据的&#xff0c;包括从 appsettings.json 文件中读取。下面是一个如何在使用.NET Core时通过 IConfiguration 读取 appsettings.json 数据的示例。 首先&#xff0c;假设你的 appsettings.json 文件内容如下&am…...

编程日记 2024/7/19 23:59:00

全球Windows机器蓝屏，作为量化人，我的检讨来了

昨天下午&#xff0c;微软给大家放了个假。Windows又双叒死机了。不过&#xff0c;这一次不是几台机器&#xff0c;而是全球大范围宕机。这一刻&#xff0c;大家都是“正蓝旗”。 蓝瓶的&#xff0c;效果好&#xff01; 现在根本原因已经找到&#xff0c;绝大多数人的机器都已修…...

编程日记 2024/7/19 23:51:54

部署和运维

目录 1.Git1.1. Git指令中merge和rebase的区别1. Commit 记录2. 合并方式3. 冲突处理4. 使用场景选择建议 1.2. cherry-pick的使用如何使用 git cherry-pick例子处理冲突撤销 cherry-pick其他选项 结论 2. 部署1. Nginx的使用场景 编译打包1. webpack2. webpack打包优化1. 代码…...

编程日记 2024/7/19 23:50:53

福田网站建设哪家便宜/百度推广怎么做最好

六. 跟踪新文件 git add 文件test2已被跟踪&#xff0c;并处于暂存状态 git add 后面可以指明要跟踪的文件或目录路径。如果是目录的话&#xff0c;就说明要递归跟踪该目录下的所有文件。 git add 的潜台词就是把目标文件快照放入暂存区域&#xff0c;也就是 add file into s…...

编程日记 2024/11/19 19:38:36

程序员做笔记的网站/西安百度竞价代运营

(ps|grep python|awk {print $1})|xargs kill -9 管道符“|”用来隔开两个命令&#xff0c;管道符左边命令的输出会作为管道符右边命令的输入。下面说说用管道符联接起来的 几个命令&#xff1a; “ ps - ef”是Red Hat 里查看所有进程的命令。这时检索出的进程将作为下一条命令…...

编程日记 2024/11/19 17:38:44

番禺做网站600元/seo研究协会网

写在文章之前&#xff1a;博友们&#xff0c;你的支持是我最大的动力&#xff0c;在阅读我文章的同时&#xff0c;也请为我投上你宝贵的一票&#xff0c;谢谢。 投票请进&#xff1a;http://2010blog.51cto.com/855319 &#xff0d;&#xff0d;&#xff0d;&#xff0d;&#…...

编程日记 2024/11/19 15:53:56

滨州企业做网站/品牌营销策划怎么写

通过共享内存和信号量的乒乓机制实现大数据块在不同程序之间的数据传输。共享数据结构体&#xff1a;/* share memory type */typedef struct __SHARE_BUF_NODE__{int max_buf_size;//the share buffer sizeint share_size;//the share block size in the share buffervoid *sh…...

编程日记 2024/11/19 11:00:39

ppt做的比较好的网站/网页制作的软件

我们常见的执行js代码都是放入到HTML引入后然后通过HTML文件来执行胡查看代码&#xff0c;显然这是比较麻烦的事情&#xff0c; 如果你的电脑里面安装了node.js&#xff0c;你可以使用node来直接使用node来运行你想要运行的js文件&#xff0c; 具体的操作如图所示&#xff1a…...

编程日记 2024/11/19 7:34:27

坪地网站建设价格/电子商务seo

1、监控过程将向项目提供什么好处? A.通过观察和衡量项目绩效来识别偏差 B.通过观察和衡量项目绩效向变更控制委员会(CCB)识别输入 C.通过观察和衡量项目绩效来更新过程改进计划。 D.通过观察和衡量项目绩效来更新项目管理计划。 答案&#xff1a;A。解析&#xff1a;4.5监…...

编程日记 2024/11/19 7:32:19