vue项目微信公众号，小屏播放，video层级过高的坑

最新推荐文章于 2023-08-25 17:36:51 发布

洪荒小仙女

最新推荐文章于 2023-08-25 17:36:51 发布

阅读量1.7k

点赞数

分类专栏： vue项目文章标签： web vue 前端

本文链接：https://blog.csdn.net/weixin_45546220/article/details/105582953

版权

本文介绍了在Vue项目中遇到的微信浏览器小屏播放video时，由于video层级过高导致其他HTML元素被覆盖的问题。解决方案是在video标签上添加属性`x5-video-player-type="h5-page"`，此方法能有效防止视频不全屏播放并解决遮挡问题，经测试证实可行。

摘要由CSDN通过智能技术生成

众所周知，video标签兼容性是真的差，特别是遇到安卓微信浏览器，
小屏播放，video层级过高，视频播放的时候其他HTML被覆盖

	<video
        controls
        style="object-fit:fill;width: 100%;height: 3.5rem;"
        class="videosrc"
        ref="videoPlay"
        :poster="poster"
        preload="metadata"
        :src=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

洪荒小仙女

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

uniapp|原生控件层级过高无法覆盖的解决方案

前端程序员、项目经理、人工智能博主

06-25

1万+

简称nview，它是一个原生的类画布的控件，其实cover-view也是用plus.nativeObj.view封装的。这种方式被称为混合渲染。另外cover-view无论如何都无法解决原生导航栏、tabbar、web-view组件的覆盖，为此App端补充了2个层级覆盖方案plus.nativeObj.view和subNVue。但如果在pages.json里注册了原生导航栏和tabbar，nvue里的界面元素默认也无法覆盖这些，也需要plus.nativeObj.view或subNVue。

vue.js 在微信公众号内实现视频播放

黑山老妖的小站

12-21

9845

环境：我司从事在线教育行业，想要将老师的讲课视频实现在线播放并监控用户播放时长关键词：vue.js、微信公众号、video视频播放 1. 微信公众号内可以直接使用video进行视频播放 2. 微信公众号内的视频无法自动播放，即使你加了autoplay="true"，网友们说可以将视频上传至腾讯视频，我们服务器是阿里云所以没尝试 3. ios手机中的播放可以不全屏播放，但是安卓手机点击播放

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

html视频向上,html中flash视频层级一直比div层级高的解决办法

weixin_39550940的博客

06-03

250

最近由于项目需求，在页面中需要放置一个网页播放器，这倒没什么，问题是页面的顶部导航是固定的，然后向上滚动的时候发现视频直接覆盖顶部导航栏，看着相当别扭，本来以为只要给这个视频一个z-index:9999;position:relative;就可以解决的，最后发现如何设置z-index都没用。在网上搜索了一下相关资料，大部分都是说z-index，然而并卵，最终还是从视频播放器的属性入手，其中的fla...

video 在安卓版本上小窗口播放，IOS 微信 video小屏幕播放，微信全屏video

小漠007的专栏

03-30

7573

目录：安卓和ios微信video小窗口播放（太水，可以直接跳过）noscript标签video移动端上面不得不说的辛酸腾讯关于video的说明文档:https://x5.tencent.com/tbs/guide/video.html一个video html标签包含以下几个常见的属性:x-webkit-airplay="true" //支持Airplay的设备（如：音箱、Apple TV...

vue vue-dplayer 视频播放器自适应浏览器宽高

qq_42186233的博客

10-20

4069

本文参考至文档： [前端] Vue视频组件由于业务需要默认铺满浏览器，故做一个补充，希望能帮到大家效果： 1.安装vue-dplayer cnpm install vue-dplayer -S 2.在main.js中导入 import VueDPlayer from ‘vue-dplayer’; import ‘vue-dplayer/dist/vue-dplayer.css’; Vue.use(VueDPlayer); 3.demo <template> <div

vue+videojs+微信移动端的一些问题

qq_37876304的博客

12-03

1671

vue+videojs视频播放移动端总结说明项目需要在微信公众号中播放视频,也可以使用 vue-video-player 插件来处理,这里使用videojs来处理,以及一些遇到的问题/ 一、videojs使用 videojs在vue的基本使用方法???? 二、video在移动端微信中横屏显示 1. h5新属性 <video ref="video" id="my-video" class="video-js vjs-default-skin vjs-big-play-c

uniapp video视频层级过高遮挡顶部导航页面弹窗使用原生子窗体解决问题

05-30

在uniapp项目中 video层级过高页面滑动时遮挡顶部导航或者页面有弹窗效果视频同时也会遮挡弹窗使用subNVues 解决此问题 pages.json 中配置{ "path": "pages/index/index", "style": { ...

解决uniapp开发抖音小程序video-player覆盖问题，超详细教程，前端相关操作，已成功上线产品

最新发布

03-28

uniapp是一个基于Vue.js开发的多端框架，它允许开发者使用一套代码同时发布到iOS、Android、Web（H5、微信小程序、支付宝小程序等）以及各种小程序平台，包括抖音小程序。video-player是uniapp提供的一款视频播放...

2021 Vue 小程序面试笔试题

zhixin21的博客

11-18

1587

一、html5部分 1.sessionStorage和localStorage的区别答案： sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 2.Canvas和SVG的区别是什么答案： canvas绘制2d位图svg绘制2d

微信中video小窗播放（ios+android）

Anticlimax

03-15

1886

给video标签加上3个属性： x5-playsinline="true" playsinline="true" webkit-playsinline x5-playsinline="true" 是对微信中安卓有效，另一个对ios有效微信中视频插件:video.js 在线地址: 这个插件配合上面的3个属性苹果下不自动全屏播放结束后自动隐藏 <script type="t...

js/vue：video 视频播放器

qq_36413371的博客

04-13

986

一：原生方式实现视频播放 // 设置视频播放速率（倍速播放） var video = document.getElementById(‘video’) video.playbackRate = this.value // 设置视频亮度 -webkit-filter: brightness(0.2) 取值范围0-1（数字为0时为正常样式，为1时表示的是100%亮度，无法看到图片） videojs 也是用video标签播放的，用video标签就会调用系统自带的播放器。移动端浏览器劫持了你自己的播放器

*video标签在微信公众号上出现的一些问题*

XCC_0316的博客

06-14

1490

**video标签在微信公众号上出现的一些问题** 1，在微信公众号Android和iOS 视频播放禁止放大 video标签上添加属性 video.attr('playsinline','true'); video.attr('x5-playsinline','true'); 2，Android在微信端视频播放完之后推荐不相关的内容 ··· let isiOS = !!navigator....

微信公众号页面video标签播放视频兼容问题

风如白话的博客

05-14

3675

web页面,内嵌许多小视频，在ios和安卓手机上播放时，存在以下问题： 1、在微信浏览器内播放时，视频会自动全屏 2、如果每个视频都有一张自定义的图片作为封面，在显示视频的同时，如果没有给这个视频设置高度，视频的容器在安卓手机上会被视频的封面撑大到变形解决办法 : <video class="video-source" width="100%" 　　　height="240px" /*如果有封面，请设置高度*/ controls /*这个属性规定浏览器为该视频提供播放控件

Vue video标签poster属性在安卓微信中不生效问题解决

林中明月间丶

01-16

3006

poster属性这是用来引用video的封面图片的！！！！！ style="object-fit:cover" 其实你还可以改变属性的值，比如说： style="object-fit:fill" 会拉伸图片，，，，， <video width="100%" height="100%" controls="controls" poster="封面图地址" style="obj...

关于vue中height属性需要根据屏幕高度动态调整但是设为百分比不生效的解决办法

qq_24503157的博客

04-16

2266

关于vue中height属性需要根据屏幕高度动态调整但是设为百分比不生效的解决办法在Vue中项目中遇到height属性设为百分比但是不生效，却需要根据屏幕高度动态调整heignt属性的解决办法，使用vue watch监听，直接贴代码。 1.设置屏幕高度变量 2.在mounted计算属性中给屏幕高度变量赋值 3.使用watch监听屏幕高度变化并调整自己想要改变div中的高度这种方式仅针对于那种height属性百分比不生效，但是用具体的例如height:500px生效的结果 ...

uni 中使用video在移动端层级过高问题解决方案

weixin_50408263的博客

08-25

3743

通过控制自动全屏播放和退出全屏播放后暂停播放，来避免页面划走后视频仍旧播放的问题，但是，出现了封装在组件中的video 的api失效的问题。这个方法可行，但是咱们是包在swiper里的，current发生改变的时候，子窗体会出现渲染延迟问题。我们给swiper塞两个东西，一张普通的图片，一张视频的封面图，用返回类型来进行判断展示。我们把swiper里注入视频的封面图，给一个点击事件，点击打开弹出层自动开始播放视频。项目中的轮播图中包含图片和视频，点击视频进行视频播放。首先层级问题，网上有很多种解决方法。

video视频背景层级过高解决方案

无名之辈-_-

03-31

2133

uni-app video

关于video标签的使用心得

qq_36877078的博客

04-18

1965

视频video标签的使用心得

vue3 微信公众号网页授权

03-06

下面是关于Vue 3和微信公众号网页授权的介绍： 1. Vue 3: - Vue 3是由尤雨溪开发的一种JavaScript框架，用于构建用户界面。 - 它具有更好的性能和更小的包大小，使得应用程序加载更快。 - Vue 3引入了...