解决H5安卓自带浏览器video层级问题

一、问题

video标签在安卓自带浏览器下会默认处于最高层级。且会自动fixed在页面上方，loop属性失效

通常如果需要video自动播放，我们会这样写：

<videostyle={{ width: '100%', height: '100%',objectFit:'fill' }}loopautoPlaymutedref={this.videoRef}webkit-playsinline="true"x-webkit-airplay="true"playsinline="true"x5-video-player-type="h5-page"x5-video-player-fullscreen="false"><source src={'video.mp4'} />
</video>

x5属性只针对腾讯系的浏览器，但是由于安卓自带浏览器不是x5内核，所以自然无效。且不支持zIndex的写法。

二、解决

将video转化为canvas

2.1 安装

npm i jsmpeg
brew install ffmpeg

ffmpeg为视频流格式转换插件。 jsmpeg只支持mpg格式的视频。所以需要将对应的视频转换成mpg格式。命令行输入：

ffmpeg -i video.mp4 -f mpeg1video -vf "crop=iw-mod(iw\,2):ih-mod(ih\,2)" -b 0 video.mpg

即可在当前转换文件的目录下生成指定格式的视频。

2.2 引入

<canvas id="launchpad-h5" style={{height: '220px', width: '100%'}}/>

let launchpadH5 = document.getElementById('launchpad-h5')if(launchpadH5){let player = new jsmpeg('video.mpg', {canvas: document.getElementById('launchpad-h5'),video: true,loop: true,autoplay: true,});player.play();}

建议只在h5上使用这个方法并控制视频大小，因为比较耗费性能，视频如果过大画布绘图速度会很慢。

解决H5安卓自带浏览器video层级问题相关推荐

手机html图片模糊,css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose...
最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都 ...
前端 h5实现自带浏览器支付功能
前端需要做的这里使用vue 中的 mixin 第一步获取订单号,调用后端的接口获取订单号第二步:调用后端的接口,后端给返回一个url地址,然后打开这个地址(这个地址是调用微信支付的地址,打开即调用 ...
android应用是非正式版本,华为手机自带浏览器，应用是非正式发布版本，当前设备不支持安装
查了一下网上一些解决方案: 解决方法: 在gradle.properties 文件中添加如下指令: android.injected.testOnly=false 但是我配置了没有效果,我测试是用华为 ...
H5的video 在安卓浏览器上层级问题
项目场景: H5的video 在安卓浏览器上层级问题问题描述 H5的video 在安卓浏览器上层级问题原因分析: 目前猜测是浏览器劫持video并且生成原生视频播放器无法用z-index控制解 ...
html5微信视频禁止自动全屏,关于HTML5 video标签在安卓版微信浏览器内被强行全屏播放的问题...
最近在一个H5项目中,碰到了传说中的video标签在安卓版微信浏览器内被强行全屏播放问题.原计划在视频播放完毕后,页面出现video的ended事件时,应该显示分享和处于转化页的按钮,如图: 然而在这 ...
解决微信浏览器video标签自动播放视频失效
正常在浏览器好好的视频,在微信内置浏览器中点击播放全屏,样式也不一样,自动播放失效.罪魁祸首是微信把video标签都成微信规则的了.下面方式可以解决视频播放全屏以及不能自动播放的问题. <vid ...
前端刚实习的一些建议(包含一些问题的解决：移动端滑动监听不灵敏，video层级过高)
自己刚实习(前端岗位),也算完整的做了一个项目,我感觉在项目中更多的是熟悉公司的业务逻辑,每个公司都有自己的一套构建方案,也有自己的环境,比如测试环境,预发布环境等等. 写这个主要是想分享一下,我在公 ...
强制 html5 播放,关于HTML5 video标签在安卓版微信浏览器内被强制全屏播放的问题...
最近在一个H5项目中,碰到了传说中的video标签在安卓版微信浏览器内被强制全屏播放问题.原计划在视频播放完毕后,页面发生video的ended事件时,应该显示分享和进入转化页的按钮,如图: 然而在很 ...
微信内置浏览器video标签自动全屏播放以及层级过高问题
转载自:微信内置浏览器video标签自动全屏播放以及层级过高问题 - 程序员大本营今天事用html5的<video>标签做微信内置浏览器视频播放页面时,需要在视频层级上显示类似弹幕的对话 ...

解决H5安卓自带浏览器video层级问题

一、问题

二、解决

解决H5安卓自带浏览器video层级问题相关推荐

最新文章

热门文章