β

视频播放的那些事

Taobao FED | 淘宝前端团队 156 阅读

视频播放的那些事

播放器

类型 video IOS video Android UC SAC UC HAC PlayBuddy Glue
平台 IOS手淘 android手淘 android手淘>=5.3.2 android手淘>=5.4.9 android手淘>=5.3.2 android手淘<5.3.2
loading 可定制 可定制 可定制 不可定制,丑陋
控件可定制性 可以 可以 不可以 可以 不可以 不可以
全屏 支持竖全屏 不支持 支持竖全屏 可以 支持 支持
模拟全屏 支持 支持 不支持 有bug
兼容性 较好 较好 较好 一般,不兼容 android 5.0及以上

接口与事件封装

上面介绍了手淘中可供 WebView 选择的播放器,对于业务方而言迫切需要一个解决方,无需关心底层差异。为此,我们屏蔽移动端不同系统平台、宿主环境、播放器的实现细节和兼容性问题,提供统一的接口和事件,具体如下:

兼容性处理

接下来谈谈在开发过程中遇到的各种小问题及其解决办法。

video

video::-webkit-media-controls-start-playback-button {
display: none;
}
_timeUpdate(e) {
var currentTime = this.getCurrentTime();

// 判断是否为首帧
if (currentTime !== undefined && currentTime !== 0) {
this.fire('firstpaint');
}
}

_playing() {
if (Env.os.ios) {
this.fire('firstpaint');
}
}
isWork() {
if (videoEl.readyState === 0 && videoEl.videoWidth === 0) {
return false;
}

return true;
}
if (this.transverseFullScreen) {
if (curEl.hasClass('normal')) {
curEl.removeClass('normal');
this._transverseFullScreen(false).then(() => {
$('body').removeClass('co-fullscreen').attr({ height: 'auto' });
this.videoWrapperEl.height(this.videoOriginHeight).removeClass('fullscreen');

this.player.fire('transversefullscreen', { fullscreen: false });
this.resize();
} else {
curEl.addClass('normal');
this._transverseFullScreen(true).then(() => {
$('body').addClass('co-fullscreen').attr({ height: win.height() });
this.videoWrapperEl.height(win.height()).addClass('fullscreen');

this.player.fire('transversefullscreen', { fullscreen: true });
this.resize();
});
}
return;
}
if (this.auoplay && env.app.TB && env.network.wifi) {
if (player.getCurrentTime() > 0 && !player.isPause()) {
return;
}
if (this.hasAutoPlay) {
return;
}
this.hasAutoPlay = true;
startEl.trigger('click');

function autoplay() {
doc.detach('touchstart', autoplay);
if (player.getCurrentTime() > 0) {
return;
}
startEl.trigger('click');
}
doc.on('touchstart', autoplay);
}

native播放器

document.addEventListener('WV.Event.Page.Refresh', $.proxy(this.destory, this), false);
document.addEventListener('WV.Event.Key.Back', $.proxy(this.destory, this), false);
win.on('unload', $.proxy(this.destory, this));
win.on('beforeunload', $.proxy(this.destory, this));
/__
* 返回值需要是整数,否则会有异常
*/
_getVedioPos(isDpr) {
var el = this.el,
offset = el.offset(),
dpr = 1;

if (isDpr) {
dpr = this._getDpr();
}

return {
x: parseInt(offset.left / dpr),
y: parseInt(offset.top / dpr),
w: parseInt(el.width() / dpr),
h: parseInt(el.height() / dpr)
};
}

总结

附:手淘同学播放器兼容性表

品牌 机型 手淘版本 操作系统版本 播放器控件 视频列表切换 试看控制 观看进度同步 切换模式 问题
苹果 6 plus 5.2.7 8.11 *
苹果 6 5.2.7 8.11 *
苹果 5s 5.2.7 8.11 *
苹果 5 5.2.7 8.11 *
苹果 4s 5.2.7 8.11 *
苹果 4 * * *
google nexus 5 * yun os 3 × *
google nexus 5 * 安卓 5 × *
三星 N7100 4.9 * × *
三星 NOTE4 4.9 * 模式二点最大化crash
三星 NOTE3 4.9 * × *
三星 S4 5.2.7.3 * 模式二,播放有问题
三星 I9300 4.3 * *
三星 S3 5.2.8.2 * *
三星 S5 5.2.7.3 * *
魅族 MX2 * * * *
魅族 MX4 PRO * * *
魅族 魅蓝Note * * *
魅族 MX3(安装不上) * * *
华为 荣耀6 * * 模式二可能播放不了
华为 mate7 * * 模式二可能播放不了
华为 c8816 * * 进度条拖动会跳
华为 荣耀3c * 4.4.2 ×一直展示loading的图片 模式二播放不了
华为 C8813 * 4.1.1 高清视频不能播放
HTC MAX * * * *
HTC 816w * * *
VIVO Find5 * 4.1.1 *
VIVO X3 * 4.2.2 *
小米 2S * 4.3 * 高清的播放不了
小米 3 * * * * *
小米 4 * 4.4.4 * *
索尼 M512 * 4.4.2 *
索尼 xperia 36l * 4.1.2 * *
nubia nx403 * 4.2.2 × * 模式一,模式二播放均有问题
锤子 * * * *
oppo x907 * 4.0.3 很难点到 *
nexus5 * * * 第二种模式crash

注:模式1为video,模式2为glue native播放器

视频播放的那些事

作者:Taobao FED | 淘宝前端团队
淘宝前端团队(FED)
原文地址:视频播放的那些事, 感谢原作者分享。

发表评论