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

解决网页中的 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.lryc.cn/news/402912.html

相关文章:

  • .Net--CLS,CTS,CLI,BCL,FCL
  • Stable Diffusion:质量高画风清新细节丰富的二次元大模型二次元插图
  • 数读MEME之争:以太坊获更高价值共识,抢占热点成Solana流量密码
  • python的with语句
  • Selenium原理深度解析
  • 算法复杂度<数据结构 C版>
  • 【XSS】
  • Go网络编程-RPC程序设计
  • Linux 性能优化:轻松入门
  • C++相关概念和易错语法(22)(final、纯虚函数、继承多态难点)
  • 状态管理的艺术:探索Flutter的Provider库
  • 玩转HarmonyOS NEXT之IM应用首页布局
  • GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建
  • 记录些MySQL题集(4)
  • pdf提取其中一页怎么操作?提取PDF其中一页的方法
  • godot使用ws
  • Windows FFmpeg 开发环境搭建
  • 链路聚合概述
  • 【链表】算法题(二) ----- 力扣/牛客
  • 合成复用原则
  • 安卓自带camera hal3 实例README.md翻译
  • ActiViz实战:ActiViz中的自己实现鼠标双击事件
  • Linux-交换空间(Swap)管理
  • 扫描某个网段下存活的IP:fping
  • 【深度学习】PyTorch框架(3):优化与初始化
  • Go-知识测试-子测试
  • .net core IConfiguration 读 appsettings.json 数据,举例
  • 全球Windows机器蓝屏,作为量化人,我的检讨来了
  • 部署和运维
  • 微信小程序基本语法