本文来自“小时光茶社(Tech Teahouse)”公众号css
做者简介:
文赫,2015年加入腾讯,做为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具备丰富的移动端开发和直播开发经验。html
企鹅电竞项目,直播和视频播放是其中的核心。面对着产品同窗不断的询问:为何h5的体验这么差?为何不能和app的播放体验保持一致?咱们对着h5不明确的文档和不一样浏览器的怪异表现欲哭无泪。 通过一系列的调研爬坑,斩荆披棘,咱们一步步提高了体验,作到了和app基本一致的体验。在摸索优化背后,咱们也想把这些问题和解决方法总结下来,让其余同窗作到直播的时候能够自豪的说,这就是咱们的h5直播体验前端
<video autoplay><video/>
可是在不少浏览器里,如iOS下并不支持这个属性,在iOS下必须给webview设置css3
self.wView.allowsInlineMediaPlayback = YES;self.wView.mediaPlaybackRequiresUserAction = NO;
才能让这个属性生效从而让用户一进入页面就开始视频的自动播放web
在iOS Safari和一些安卓的一些浏览器下播放视频的时候,不能在h5页面中播放视频,系统会自动接管视频api
若是须要在h5页面内播放视频,须要在视频标签上加上 webkit-playsinline,在iOS10之后,须要加上playsinline,建议同时加上这两个属性,同时须要app支持这种模式,手Q和微信都支持这种模式浏览器
//在html <video id="player" webkit-playsinline playsinline > //在app内设置webview属性 webview.allowsInlineMediaPlayback = YES;
在安卓下,一些浏览器如QQ浏览器和UC浏览器,系统会把视频的层级调到最高,因此若是想在页面上显示dom元素,都会被视频盖住,单纯的设置该dom的z-index是无效的,如图所示微信
解决方案:网络
在iOS下会有一个默认的播放图标,如图所示app
在iOS都会默认显示,不能经过js控制,可是能够经过css样式将其隐藏
video::-webkit-media-controls-start-playback-button { display: none; }
在h5播放的时候,若是在video标签上设置了controls属性,则会在视频里显示控制栏
须要注意的是这个控制栏是系统webview自带的,没法经过css控制其样式,建议不要使用这个属性而是本身经过dom本身制做一套控制条
咱们知道video暴露了play和pause方法来提供视频的播放和暂停,可是h5没有标准的刷新方法,若是咱们想实现视频的刷新,则须要经过js实现
var player = $('#player')[0]; player.load(); setTimeout(function () { player.play(); })
h5暴露了一个webkitRequestFullScreen方法,可让每一个dom都请求全屏,固然video标签也可使用。
可是在测试中发现,一些安卓机不支持该属性,如小米手机,因此须要在调用的时候进行一下判断
var player = $('#player')[0];if (player.webkitSupportsFullscreen) { player.webkitEnterFullscreen(); } else { player.webkitRequestFullScreen(); }
咱们上边说道调用h5的webkitRequestFullScreen方法来进入视频的全屏,那么这个方法会使浏览器彻底接管视频播放,如图所示
这种接管的后果是这时的咱们是没有办法控制视频的播放,也没有办法在上面浮动咱们的dom元素,如弹幕,礼物这些,会彻底被视频盖在下面,因此咱们的目标便是解决这种系统接管的问题
样式全屏的核心是设置video标签的宽高,使其撑满整个webview,看上去像全屏同样
可是由于视频通常都是16:9的宽高比,因此在竖屏状况下不能很好的作到铺满整个屏幕
而通常用户进入页面基本都是竖屏,因此咱们就要考虑怎么让用户在竖屏点击全屏按钮时,能体验到像终端app同样自动进入横屏全屏的体验,下面有两种方案
1.在用户点击全屏时候,经过css3属性旋转屏幕
经过css的transform,咱们能够把dom元素旋转显示
经过-webkit-transform: rotate(90deg)并设置video的高度为当前webview的宽度,video的宽度为当前webview的高度来实现旋转全屏.
这种模式的显示没有太大问题,但由于是经过css控制的页面dom显示,对于原生的空间不能很好的控制,如系统的键盘
在拉起键盘输入弹幕的时候,键盘不受控制仍是竖屏显示了
若是页面不涉及与原生组件的交互,那么这种方案是一种很可行且兼容性比较好的方案
2.用户在点击全屏时,经过js api来控制webview旋转横屏
在手Q里,咱们和终端的同窗合做添加了控制webview横竖屏的接口
在用户点击全屏的时候,先判断当前是否横屏
/** * 是否横屏 */ function isHorizontal() { if (window.orientation != undefined) { return (window.orientation == 90 || window.orientation == -90); } else { return window.innerWidth > window.innerHeight; } }
//设置webview为横竖屏 mqq.ui.setWebViewBehavior({ orientation: 0 //0是竖屏,1是横屏 });
若是是竖屏则强制webview旋转进入横屏,同时监听页面的resize方法,页面横竖屏变化的时候会触发这个方法,在这个方法里再动态的调整video的宽高来铺满整个屏幕
注:
以前咱们发现x5插入了一段js来劫持视频的全屏的事件
知足条件的video标签全屏时都会被X5接管,另外调用webkitEnterFullscreen方法时,X5也会接管播放器。
若是发如今x5内核下没法使用伪全屏而被浏览器接管,能够咨询下x5同事为你的域名开启白名单,不接管你域名下的视频播放
在经历过各类优化和调整后,咱们能够在h5直播页作到看直播,看弹幕,发弹幕,发送礼物,表情,查看排名等各类功能,再配合上手Q里的隐藏titlebar的_wv=16777217,能够实现全屏播放效果,作到了媲美原生播放的体验。
如今的h5的播放还有不少的表现和兼容性的问题,但愿这份指南能够帮你在遇到一样的坑时能尽快爬出来,并优化你的h5播放体验,吸引到更多的用户 : D
更多精彩内容欢迎关注腾讯 Bugly的微信公众帐号:
腾讯 Bugly是一款专为移动开发者打造的质量监控工具,帮助开发者快速,便捷的定位线上应用崩溃的状况以及解决方案。智能合并功能帮助开发同窗把天天上报的数千条 Crash 根据根因合并分类,每日日报会列出影响用户数最多的崩溃,精准定位功能帮助开发同窗定位到出问题的代码行,实时上报能够在发布后快速的了解应用的质量状况,适配最新的 iOS, Android 官方操做系统,鹅厂的工程师都在使用,快来加入咱们吧!