h5 实现视频手势上下屏滑动 (类似抖音)

1. 首先考虑无限滑动的实现, 最初的第一反应, 是用竖向的轮播来实现.

这里要考虑的是如何实现无缝衔接～

是否开启无限循环

我是这样实现的, 总共轮播有三帧, 所以特殊的是前两张和没有后续数据的后两张, 是不存在无限循环的, 其它条件下存在无限循环.

前两张

currentIndex 为当前视频的下标, 那么 currentIndex<2 的时候, 返回轮播为 false.

后三张

当

currentIndex+3 > 总的视频数

, 这时候需要考虑后三张时候是无限循环, 如果滑动方向向上 (即手指下滑), 去返回上一页时, 那么当

currentIndex+2=== 总的视频数

时, 还是无限循环的, 其它情况则取消无限循环.

更新数据

同理, 前两张和后三张需要特殊处理

如果滑动方向向上 (即手指下滑), 则第 0 张没有前一张, 不需要处理

如果滑动方向向下 (即手指上滑), 那么前两张的位置不需要变, 之后的依次进行位置累计改变

如果不是后三张, 或者是手指下滑并且是倒数第二张, 这时, 进行数据替换.

如果位置是轮播的第 0 位, 则将轮播的第 1 位替换为 currentIndex+1, 将轮播的第 2 位替换为 currentIndex-1.

如果位置是轮播的第 1 位, 则将轮播的第 2 位替换为 currentIndex+1, 将轮播的第 0 位替换为 currentIndex-1.

如果位置是轮播的第 2 位, 则将轮播的第 0 位替换为 currentIndex+1, 将轮播的第 1 位替换为 currentIndex-1.

注: 至此, 无限滑动七七八八就这样了, 只是有一个问题, 就是最后一张或者两张, 可能会不安全顺序显示, 即最后一张不一定是最后一张.

后续调试的时候, 意识到用轮播其实是有点傻的行为, 可以使用 fullpage 来实现这个需求, 应该效果会更好一点.

2. 原本以为 h5 来做这个效果, 最难处理的就是无限滑动了, 谁知, 最后卡的我怀疑人生的是 video 的播放.

我没有使用 videoJs 的插件库, 用的是原生的 video 标签, 后续如果有实现类似需求的, 推荐使用 videoJs 的库, 会方便一点.

产品需求, 滑动到该页时自动播放

原本以为应该不是什么大问题, 但是, 神坑就在这里～～～～

视频全屏播放 增加属性 "x5-video-player-fullscreen", "true";"x5-video-player-type", "h5", 增加样式 object-fit: fill

视频在标签内播放, 可以在 video 标签上面加 div 层, 需要设置属性:"webkit-playsinline", "true", "playsinline", "true";

视频预加载, 增加属性 "preload", "auto"

视频播放前出现大的播放按钮, 那是默认的封面图, 可以通过属性 poster 设置, 例如:"poster","url"

iOS 下监听'canplay'和'canplaythrough'(是否已缓冲了足够的数据可以流畅播放), 当加载时是不会触发的, 即使 preload="auto" 也没用 (这个属性在移动端是完全没用的), 但在 pc 的 Chrome 调试器下和 Android 下, 是会在加载阶段就触发. iOS 需要播放后才会触发 (当对于不支持自动播放的渲染引擎还是得通过用户手动触发)

神坑来了, 在 Android 和 iOS 上蹦跶的漂漂亮亮的 video 自动播放, 遇上了 iOS 的低电量模式～～

就报了如下的错误～～

iOS 下 video 标签自动播放报错

说你需要在用户允许时, 才能播放, 那就是在 iOS 的低电量模式下, 手动点击播放～

官方说明: https://webkit.org/blog/6784/new-video-policies-for-ios/

然后我这边的实现是, 在 video 未播放时, 取了一个 image 来作为

video 封面, 点击播放的按钮, 也是 UI 给定的, 但是在 ios12 的低电量模式下, 点击该 image 来调用 play(), 也是会报以上的错误的, 最后兜兜转转, 发现, 在 ios12(写该文时, iOS 最高版本为 12.2) 版本中, 用户点击来触发播放时, video 标签必须在当前视窗内, 并且, 如果点击比它层级更高的播放按钮, 也是不会正常播放的.

image.PNG

最后的处理方式是, iOS 上, 在未播放状态时, 将 video 给定一个透明度, 将播放按钮放置在 video 下层, 透视出来, 因为 iOS 上 poster 的表现还算满意, 就没有再用 image 来作为封面图. 至此在低电量模式下, 点击播放按钮, 可以正常播放～

来源: http://www.jianshu.com/p/c46c01afe3f4