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

我已经超鬼了

已于 2025-01-15 10:56:19 修改

阅读量1.2k

点赞数 6

分类专栏：前端文章标签： video 标签移动端浏览器视频播放脱离文档流

于 2024-07-16 17:26:24 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_40795574/article/details/140471850

版权

问题现象

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

解决方案

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

<video
    webkit-playsinline=""
    playsInline
    x5-playsinline
    t7-video-player-type="inline"
    x5-video-player-type=&#

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我已经超鬼了

关注关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

UC中video脱离文档流的规避方案（含常见浏览器判定）

riddle1981的博客

08-28

2735

首先声明目前没有找到彻底的解决方案找到的是规避方案，可以根据业务场景灵活食用。我的业务场景是要在video上盖东西，video会跑到最上层，体验很差。如果是相同场景可以继续看，不是可以直接退出。 1、判断他是个uc浏览器 navigator.userAgent.indexOf("UBrowser") 2、当video上需要盖东西的时候把video标签隐藏起来。（对，就是这么简单粗暴。因为即使隐藏起来效果也比video跑到文档外面乱跑视觉效果好的多）以下是各种浏览器ua判定 var OsObject=na

解决uc浏览器劫持video标签问题

smile_y_y的博客

05-15

2144

解决uc视频悬浮播放，video标签被浏览器劫持，vide0适配

参与评论您还未登录，请先登录后发表或查看评论

video标签播放视频禁止脱离文档流

风如白话的博客

05-20

2119

video 标签在微信公众号页面播放视频时，设置h5同层播放如下： webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/ x-webkit-airplay="true" /*这个属性还不知道作用*/ playsinline="true" /*IOS微信浏览器支持小窗内播放*/ x5-video-player-type="h5-page" /*启用H5播放器,是wechat安卓版特性*/ x5-video-orientation="

关于video标签属性你了解多少？

最新发布

weixin_47389477的博客

03-12

383

关于video标签,在W3Cschool中有些比较属性的属性，但是一些别的属性，你了解多少？：在ios设备上是否全屏播放"：作用是允许视频在腾讯X5浏览器中内联播放，不设置此属性的话，视频默认在全屏模式下播放：playsinline属性主要用于控制视频在iOS设备上的播放模式，防止视频在全屏模式下播放，而是强制视频在页面内联播放‌。这个属性最初是由WebKit浏览器引擎（如Safari）实现的，并不是所有浏览器都支持。然而，随着移动设备的普及和视频播放需求的增加，越来越多的浏览器开始支持类似的功能‌。

处理 H5 视频标签在浏览器悬浮问题

biaov

12-12

460

这是一些兼容性写法，如果有更好的方法或者遇到了问题，欢迎交流~~

uni-app video标签浮在最上层的问题

qq_60035188的博客

09-23

3357

android video标签浮在最上方 uniapp video浮在最上方

iOS12 系统 webView加载H5页面，反复点击网页中视频播放 退出视频全屏闪退解决方式。

QiuHaoZhou的博客

12-05

6646

iOS 12系统webView 对H5播放器有不兼容迹象，如果加载的H5视频是全屏播放的，频繁切换容易造成闪退。在这个时候，就需要前端和后台一起协商解决这个问题。其实这个问题很容易解决的。只要针对播放时是否全屏播放下手就能解决问题了。后台的童鞋，只需要在配置该H5的视频的时候设置一下下面这个字段，即可。 <video playsinline="" webkit-p...

小程序video标签在（华为手机）无法播放.mp4长视频（ios上正常）

weixin_61877032的博客

03-02

4036

微信小程序video标签在（华为手机）无法播放.mp4长视频（ios上正常）

移动端video标签默认置顶的解决方案

qq_38472535的博客

07-18

701

移动端video标签默认置顶的解决方案

【html5的video标签在移动端的使用】【微信内部浏览器video自动播放】【vue-video-player】

aaa123aaasqw的博客

07-12

1294

在移动端的首页用视频做背景动画，让动画循环，自动播放，静音。

express实现视频在线播放

nidaye666666的博客

02-18

1349

刚做完，赶紧记个笔记1. nginx2. express3. 前端 1. nginx server { listen 8000; server_name localhost; # 转发host proxy_set_header Host $host; location / { # react proxy_pass http://localhost:3001; } ...

移动前端开发常见问题与解决技巧汇总

问题描述：在特定的Android机型中进行测试时，发现video标签在应用了transform属性后会脱离文档流，这会导致布局错乱。这是一种在移动端开发中比较常见的布局问题。 解决办法：在遇到这种问题时，可以选择不使用...

给video标签加一些属性，微信调用h5原生video

weixin_43960538的博客

12-23

844

给video标签加一些属性，调用h5原生video <video class="video-source" width="100%" height="240px" /*如果有封面，请设置高度*/ controls /*这个属性规定浏览器为该视频提供播放控件*/ &nb

iOS在微信中不全屏播放及允许div元素在video上

bluelotos893的博客

06-15

1155

<video class="video-player" playsinline="" //IOS微信浏览器支持小窗内播放 webkit-playsinline="" //IOS微信浏览器支持小窗内播放 preload x5-video-player-type="h5-page" //同层播放器窗口播放 x5-video-player-type="h5" //同层播放器全屏播放 x5-video-player-fullscreen="true" //同层

HTML脱离文档流的三种方法

热门推荐

theLostLamb的博客

03-17

4万+

一、什么是文档流？将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。二、什么是脱离文档流？元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在...

浏览器兼容性(js、html、css)

qq_38681468的博客

05-23

376

PC端浏览器兼容性 1.在IE9及以下如果图片加a标签会默认自带一个边框解决方案：img{border:none;} 2.display:inline-block IE7以下不支持解决方案：display:inline-block;*display:inline; 3.默认的body没有body去掉margin情况下IE5、6、7边缘会很宽margin-top加倍解决方案：body:{mar...

【html】关于移动端部分浏览器视频顶置问题解决

Dust storm的博客

07-23

285

关于移动端部分浏览器视频顶置问题解决

video标签在安卓手机内置浏览器上的播放问题

weixin_44891495的博客

08-30

1877

道阻且长，行而不辍，未来可期在手机内置浏览上，虽然没有给video标签设置controls,但在内置浏览器上，就是会显示。而且，video一旦自动播放，video的层级就会提升到最前，想设置一个盒子覆盖在上面都做不到，给前端造成了很大的困扰。看了很多相关问题的解决方法，直到看到把video的src设置为blob(视频流）安卓手机的内置浏览器因为认不出数据格式，而不再劫持video标签的渲染。直觉是个好方法，开始动手。下载blob类型的文件：在回调函数中可以这样写完美解决。

移动端浏览器解析vidio标签到最顶层，调整index-z无效

ssjjrr的博客

02-04

888

移动端浏览器解析vidio标签到最顶层，调整index-z无效