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

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

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

1. 能否开启无限循环
   我是这样实现的，总共轮播有三帧，所以特殊的是前两张和没有后续数据的后两张，是不存在无限循环的，其它条件下存在无限循环。
   • 1. 前两张
        currentIndex 为当前视频的下标，那么currentIndex<2的时候，返回轮播为false。
   • 2. 后三张
        当currentIndex+3>总的视频数，这时候需要考虑后三张时候是无限循环，假如滑动方向向上(即手指下滑)，去返回上一页时，那么当currentIndex+2===总的视频数时，还是无限循环的，其它情况则取消无限循环。
2. 升级数据
   同理，前两张和后三张需要特殊解决
   • 1. 假如滑动方向向上（即手指下滑），则第0张没有前一张，不需要解决
   • 2. 假如滑动方向向下（即手指上滑），那么前两张的位置不需要变，之后的依次进行位置累计改变
   • 3. 假如不是后三张，或者者是手指下滑并且是倒数第二张，这时，进行数据替换。
     • 假如位置是轮播的第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的库，会方便一点。

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

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

1. 视频全屏播放 添加属性”x5-video-player-fullscreen”, “true”；”x5-video-player-type”, “h5”, 添加样式 object-fit: fill

2. 视频在标签内播放，可以在video标签上面加div层，需要设置属性：”webkit-playsinline”, “true”， “playsinline”, “true”;

3. 视频预加载，添加属性”preload”, “auto”

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

5. 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来作为封面图。至此在低电量模式下，点击播放按钮，可以正常播放～