admin管理员组文章数量:1616700
一、问题
video标签在安卓自带浏览器下会默认处于最高层级。且会自动fixed在页面上方,loop属性失效
通常如果需要video自动播放,我们会这样写:
<video
style={{ width: '100%', height: '100%',objectFit:'fill' }}
loop
autoPlay
muted
ref={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层级问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728735333a1170841.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论