乐趣区

关于前端:微信H5视频踩坑记录

背景:
最近开发了一个需要,要求是在进入微信 H5 页面后,主动开始播放视频,同时视频上有悬浮的跳转页面按钮,等视频播放完后则暗藏视频显示一个后果页。

艰难及计划:
需要看起来非常简单,也十分失常,没有任何刁钻的能力要求。但真实现起来坑就多了,次要还是因为微信自身有很多限度。

依据冀望的需要点,咱们来看看问题都在哪:
1.自动播放

需要冀望在进入页面后即主动开始播放视频,咱们理所应当的加上了 autoplay 属性,然而在微信里它的性能更在于减少代码可读性等。不过微信提供了一个 WeixinJSBridgeReady 事件,在这个事件中咱们能够通过 JS 让其开始播放

document.addEventListener(
  'WeixinJSBridgeReady',
  function() {video.play();
  },
  false
);

然而并没有那么简略,在安卓机中,至多在我的小米 8SE 中,视频仍然不能主动被播放。网上有人说是因为播放的时候视频还没加载,弄个计时器重复抢救就行了,可是我的手机始终处于抢救失败的处境。那么后果是什么呢?咱们的视频停留在了未播放的预览状态,两头则是一个播放按钮

这个时候其实有一些解决思路,比方做一张针对这种状况的 UI 图当预览,诱导用户去点击两头播放等,但不管怎么说,通用性的自动播放曾经流产了。所以在斗争后,咱们改成了刚进来的时候,全屏显示一个诱导用户点击的图片遮挡视频,点击后显示并开始播放视频,留神不是点击 video 后播放视频,而是点击任意咱们诱导用户点击的货色即可,因为只有存在用户交互,咱们就能够在事件中播放

// 点击诱导图开始播放
cover.addEventListener('touchstart', playVideo, true);

但这里须要留神,因为在这个计划中咱们采纳了先暗藏 video,播放时再显示的计划,仍然是在安卓环境下,如果有人和我一样发现有时候视频主动黑屏暂停,通过 video.currentTime 获取的工夫卡在 0.001,计时器抢救也有效,如果用户不点播放,就会始终卡在这里反射出用户的那张迷茫的大脸

那么大概率是违反了一个准则导致的,即视频在暗藏状态下播放会被进行,比方咱们没有放弃 WeixinJSBridgeReady 的自动播放能力,在视频暗藏阶段仍然尝试去播放了一下,或者咱们为了让视频第一工夫缓存,在刚进入页面就让视频先播放再暂停等,只有是这种在视频暗藏状态上来调用 play(),在安卓上就很可能进入这种状态

2.非全屏播放

需要冀望的是在指定区域播放视频,这自身并不是什么问题,微信默认行为也是部分播放的,但值得注意的是,安卓微信的部分 video 播放是采纳一个独立的悬浮 Native View 来实现的,并且这个 View 自身层级十分高,齐全在 webview 之上,也就意味着咱们的代码比方 z -index 什么的将齐全无奈对其产生任何影响或笼罩,当然如果你的需要并没有要求在视频上飘着什么的话,对其默认的款式格调也能承受的话,这样也没什么不好。网上传说的播放完后插广告的行为我倒是没有试出来,但因为咱们必须要那个悬浮按钮,故而就放弃了安卓的部分播放。

3.视频上悬浮 html 按钮

部分播放和悬浮按钮在安卓微信上是抵触的,不过网上其实是有一些案例啪啪啪在打我的脸,不过仔细观察会发现,那些打脸的视频地址根本都是腾讯本人的,故而我也抉择置信传说中的微信视频白名单,即针对白名单下的视频,安卓微信就不会再对其进行花式魔改,给予其保留纯朴性能的慈善。

如果不说白名单的话,那在安卓环境下,部分播放和悬浮按钮就是两个抵触的要求,必须斗争一个,咱们抉择了在安卓环境下全屏播放同时悬浮按钮。要开启视频全屏其实非常简单,外围的属性是 x5-video-player-type=”h5″,只有这个属性在就会开启全屏了,不过倡议也把 x5-video-player-fullscreen=”true” 加上确保兼容性。留神就算加上这些属性,在 iOS 下也仍然是部分播放的,但因为 iOS 没被魔改过,故而不必放心那些蛋疼的问题,最多就是两端体验不太统一。

另外退出全屏能够应用一种特定的形式

// 退出全屏
if (document.webkitExitFullscreen) {document.webkitExitFullscreen();
}

不过全屏也有全屏的问题,在有的机型,全屏后最上层会主动悬浮 <(退出)和···(更多)两个图标按钮,这两个按钮可是在视频的区域上的,很可能会和咱们本人的悬浮按钮叠到一块,故而可能须要针对安卓调整悬浮按钮的地位。

另外那三个点的按钮点开后,会有一个分享性能,这个分享不会被 KNB.configShare 预设,也没有找到能够设置的 API,通过它分享进来的链接尽管也能用,但将会十分间接,比方对于咱们这个我的项目来说就是

咱们是曾经讲过 KNB 调用微信的接口预设过的,在其余场景下分享也是规范的气泡模式,但在安卓全屏视频右上角那三个点的分享中,就变成了这个样子。曾经反馈给 KNB 的同学了,不过看样子没什么人在乎,目前还没有找到解决方案

4.暗藏管制条

管制条天然是能暗藏就暗藏的,咱们理所应当的删掉了 controls 属性,但事件并没有那么简略。在 iOS 微信中,不应用该属性是合乎预期的,但在安卓中(为什么又是安卓?),将可能会导致视频无奈播放的问题,故而我采取的策略是,人造自带 controls 属性,当断定是 iOS 后删除该属性。其实还有另一种思路来解决,就是通过制作较长的视频,把管制条放在视线外藏起来,而后不让滚动就好,路子是野了点,但至多也是路子嘛

5.禁用全局滑动

页面自身能够高低滑动也是十分另人不爽的,网上说的禁用形式有很多,但不肯定都能见效,我应用的是

body {
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  user-select: none;
  background-color: #FFF;
}

6.视频适配不同手机比例

视频长宽比是固定的,但手机屏幕比例不同,在咱们这种全屏视频的状况下这个问题更加显著。咱们采纳的思路是,视频宽度铺满屏幕宽度,而视频自身是较长 (高) 的,比方自身适配的是 iphoneX 的全屏播放高度,但视频下方其实是能够舍弃的局部,没有什么要害内容,就算有字幕等也不会在最底部,而是底部靠两头一点的地位,这个地位的要求是在小手机上仍然能够看失去残缺字幕

这样做的益处就是较长的手机上尽量不会呈现底部留白,而小手机上则不会缺失内容,再配合不容许高低滑动,一般来说就相当于全屏视屏播放了

退出移动版