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

96
天上月丶
0.2 2019.05.21 17:30* 字数 1244

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

这里要考虑的是如何实现无缝衔接~
  1. 是否开启无限循环
    我是这样实现的,总共轮播有三帧,所以特殊的是前两张和没有后续数据的后两张,是不存在无限循环的,其它条件下存在无限循环。
      1. 前两张
        currentIndex 为当前视频的下标,那么currentIndex<2的时候,返回轮播为false
      1. 后三张
        currentIndex+3>总的视频数,这时候需要考虑后三张时候是无限循环,如果滑动方向向上(即手指下滑),去返回上一页时,那么当currentIndex+2===总的视频数时,还是无限循环的,其它情况则取消无限循环。
  2. 更新数据
    同理,前两张和后三张需要特殊处理
      1. 如果滑动方向向上(即手指下滑),则第0张没有前一张,不需要处理
      1. 如果滑动方向向下(即手指上滑),那么前两张的位置不需要变,之后的依次进行位置累计改变
      1. 如果不是后三张,或者是手指下滑并且是倒数第二张,这时,进行数据替换。
      • 如果位置是轮播的第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来作为封面图。至此在低电量模式下,点击播放按钮,可以正常播放~

工作日记