最近公司里有个项目,需求是在微信公众号里做一个类似于抖音一样的短视频播放的网页;
在经过两天的折腾之后终于给我搞出来了!
是不是一点视频就全屏播放?
是不是点了播放就直接顶到最顶层?
是不是同页面内的元素都被覆盖在下面?无论z-index还是其他css都无法改变?
是不是进度条控制条怎么也无法屏蔽?
是不是开启同层全屏,顶部的标题bar栏就没了?
接下来为你一一踩坑:
1.期间尝试了各种video属性,什么 x5-playsinline,x5-video-player-fullscreen="true"等等都加过,都无法实现安卓微信浏览器内视频的局部播放,甚至控制条都依然健在;
2.尝试了利用canvas去绘制视频,每40毫秒绘制一次视频画面,这个在IOS是可行的,到了安卓这里,在开启同层视频的情况下是可行的,但是会直接弹全屏,体验很不好,不开启同层视频的情况下,直接黑屏,看着视频在放,canvas就是不绘制,期间想试过x5内核的浏览器调试一下到底是什么问题,无奈没找到;
3.尝试了jsMpeg,这个一开始给了我希望,但是需要把MP4的视频转成ts或者mpg格式,然鹅就算转了也是没有声音只有图像,并且视频非常的花,和小时候家里电视收不到信号那种雪花屏一样,丝毫摸不着头脑,遂放弃;
4.尝试了页面内嵌iframe,同样,也是不行,一点播放,直接弹到最顶层;
总结如下:
安卓其实也很简单:video 加上 x5-video-player-type=‘h5-page’ 这个就行了!
最后附上我的代码:
<video id="video"
src="video.mp4"
autoplay="autoplay" // 自动播放
mtt-playsinline="true" // QQ浏览器播放完了会强制放广告,这属性是可以屏蔽
loop="loop" // 循环播放
x5-video-player-type='h5-page' // x5内核安卓适配
playsinline // IOS局部播放
webkit-playsinline // IOS局部播放 >
</video>
至于自动播放,IOS没啥问题,安卓的没有解决;