![cover](https://img-blog.csdnimg.cn/img_convert/6be6f427f59b4ad1a59e4e674ee61eb9.png)
移动端H5【video】浏览器劫持视频播放
在H5页面开发中会使用视频,现在是使用videojs组件进行开发,但是在部分浏览器,如夸克,QQ浏览器中,视频会被浏览器劫持,不仅样式会有变化,且视频的层次会变得特别高。解决问题2:如需实现页面内(非全屏)播放,需要在 video 标签中加入 playsinline 和 webkit-playsinline 和 x5-playsinline 属性。解决问题1: 视频转成gif 使用poster属性
·
<video>: 视频嵌入元素 - HTML(超文本标记语言) | MDN<video>标签的属性
- src :视频的属性
- poster:视频封面,没有播放时显示的图片
- preload:预加载
- autoplay:自动播放
- loop:循环播放
- controls:浏览器自带的控制条
- width:视频宽度
- height:视频高度
在H5页面开发中会使用视频,现在是使用videojs组件进行开发,但是在部分浏览器,如夸克,QQ浏览器中,视频会被浏览器劫持,不仅样式会有变化,且视频的层次会变得特别高。H5网页在手机上查看,出现的问题进行处理:
- 小米手机端自带浏览器打开网页,视频被劫持视频显示播放失败且页面空白。
- 苹果手机显示视频被劫持并全屏播放的问题和视频的层次会变高。下面是解决方法:
方法一:使用第三方播放器,一般插件做过封装以上两个问题都可以解决。下面推荐两个插件
插件下载 | MuiPlayer
几款优秀开源的HTML5 视频播放器 - 体验盒子 - 不再关注网络安全
方法二:
解决问题1: 视频转成gif 使用poster属性做背景封面也可以使用js 方法。
解决问题2:如需实现页面内(非全屏)播放,需要在 video 标签中加入 playsinline 和 webkit-playsinline 和 x5-playsinline 属性。
<video
muted
autoplay
loop
webkit-playsinline // 这个属性是ios 10中设置可以让视频在小窗
内播放,也就是不是全屏播放
playsinline // IOS微信浏览器支持小窗内播放
x5-playsinline
x5-video-player-type="h5" // 不要与x5-playsinline同时存在
x-webkit-airplay="allow"
x5-video-player-fullscreen="" // 全屏设置,设置为 true 是防
止横屏
x5-video-orientation="landscape|portrait" // 播放器的方向,
landscape横屏,portraint竖屏,默认值为竖屏
src="视频地址"
></video>
更多推荐
所有评论(0)