关于作者：
何文于2015年加入腾讯，作为后端开发工程师，参与过手Q游戏帮、游戏中心、企鹅电竞等项目。 具有丰富的联通终端开发、直播开发经验。
|编者按企鹅电竞项目，直播和视频播放是核心。 面对产品朋友，我不断问：为什么h5的体验这么差？ 为什么不能和app的播放体验保持一致？ 我们为 h5 的不清楚的文档和不同浏览器的奇怪性能而哭泣。 经过一系列的检查和挖掘，我们一步步改进了体验，达到了和app基本一致的体验。经过探索和优化，我们也想总结一下这个问题和解决方案，让其他同事可以自豪说这就是我们的h5直播体验
1.手动播放问题
不过这些情况下，也需要webview的支持。 比如可以直接在手机QQ下调用。 因为视频是不允许在Momo下直接播放的，所以必须由用户真实操作调用video.play()来触发，也就是各类Momo的h5活动页面都需要引导用户点击来启动激励。
同时我发现真正的点击一定是由touchend、click、doubleclick或者keydown等标准的wave来触发的。 Zepto封装的tap Wave无法触发播放器的播放。
2.页面内嵌播放问题
在iOS Safari和部分Android浏览器上播放视频时，h5页面无法播放视频，系统会手动接管视频
如果需要在h5页面播放视频，需要在video标签中添加webkit-playsinline。 iOS10之后，需要添加playsinline。 建议同时添加这两个属性。 同时app需要支持这些模式，手Q和陌陌都支持这些模式
//在html
<video id="player" webkit-playsinline playsinline > //在app内设置webview属性
webview.allowsInlineMediaPlayback = YES;3.视频的高度
Android下，一些浏览器如QQ浏览器、UC浏览器，系统会将视频级别调整为最高级别，所以如果想在页面上显示dom元素，它们会被视频覆盖，只需设置z的dom -index 无效，如图所示
解决方案：
1.视频上方dom上会出现弹窗时暂停视频播放
2、设置视频所在dom的父元素高度为1
3、处理完弹出风暴后，恢复视频所在父元素的高度
4.视频默认播放图标
iOS下会有一个默认的播放图标，如图
iOS上默认显示，无法通过js控制，可以通过css样式隐藏
video::-webkit-media-controls-start-playback-button { display: none;
}
5. 视频控制栏
h5播放时，如果video标签设置了controls属性，则视频中会显示控制栏
//在html
<video controls >需要注意的是，这个控制栏是系统webview自带的，很难通过css来控制它的样式。 建议不要使用该属性而是通过dom自己制作一套控制栏
6.视频刷新
我们知道video暴露了play和pause方法来提供视频的播放和暂停，但是h5没有标准的刷新方法。 如果我们要实现视频刷新，需要通过js来实现
var player = $('#player')[0];
player.load();
setTimeout(function () {
player.play();
})7、视频全屏问题 1）全屏api
h5暴露了一个webkitRequestFullScreen方法，该方法允许每个dom请求全屏。 其实也可以使用video标签。
不过在测试中发现部分Android手机不支持该属性，比如魅族手机，所以调用时需要进行判断
var player = $('#player')[0];if (player.webkitSupportsFullscreen) {
player.webkitEnterFullscreen();
} else {
player.webkitRequestFullScreen();
}2）系统接管播放
上面我们说了调用h5的webkitRequestFullScreen方法来进入视频全屏，所以这个方法会让浏览器完全接管视频播放，如图
这些接管的后果就是，我们此时没有办法控制视频的播放，也没有办法让我们的dom元素浮动在里面，比如弹幕、礼物等，都会被完全覆盖视频，所以我们的目标是解决这些系统接管问题
3）使用伪全屏（风格全屏）
样式全屏的核心是设置video标签的宽度和高度，使其充满整个webview，看起来像全屏
不过，由于视频的长宽比通常为16:9，所以在竖屏的情况下并不能很好地充满整个屏幕
通常用户进入的页面都是竖屏的，所以我们要考虑如何让用户在竖屏点击全屏按钮的时候，体验到像终端app一样手动进入横屏全屏的体验。 有以下两种解决方案。
1、当用户点击全屏时，通过css3属性旋转屏幕
通过css的transformhtml5 视频 全屏，我们可以旋转dom元素来显示
通过-webkit-transform:rotate(90deg)旋转全屏，并将视频的高度设置为当前webview的长度，视频的长度设置为当前webview的高度。
这些模式的显示没有什么大问题，但是由于页面dom显示是通过css控制的，所以无法很好的控制原生空间，比如系统按钮
拉起鼠标进入弹幕时，鼠标失控或屏幕垂直显示
如果页面不涉及与原生组件的交互，那么这些方案是非常可行且兼容的方案
2、当用户点击全屏时，通过jsapi控制webview旋转横屏
手Q中我们和终端朋友合作添加了一个socket来控制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方法。 当页面水平和垂直变化时会触发该方法。 在该方法中，视频的宽度和高度将动态调整以填充整个屏幕。
笔记：
之前我们发现x5插入了一段js来绑架视频的全屏。
当满足条件的视频标签全屏时，将被X5接管。 另外，当调用webkitEnterFullscreen方法时，X5也会接管播放器。
如果您发现x5内核下伪全屏使用困难html5 视频 全屏，被浏览器接管，可以咨询x5好友为您的域名启用白名单，不接受您域名下的视频播放
总结：
经过各种优化调整后，我们可以在h5直播页面上看直播、看弹幕、发弹幕、送礼物、表情包、查看排名等功能，再配合QQ中的隐藏标题栏_wv=16777217，可以达到全屏播放的效果，达到与原生播放媲美的体验。
如今的h5播放仍然存在很多性能和兼容性问题。 希望本手册能够帮助你尽快走出同样的坑，优化你的h5播放体验，吸引更多的用户:D
发表评论