视频是几乎全屏的,所以想增加上滑、下拉效果,在上滑、下拉时,进行视频切换。
使用的是 on("touchstart", callback)、on("touchmove", callback),这两个事件只在手机中有效,在电脑中无效。
但是整个页面中,还有一个互动区,具有滚动性,用于查看消息记录,当在这个互动区滚动时,也会触发上述事件。
于是将事件作用改在播放器上,此时测试,一切似乎良好,因为苹果微信、好几款安卓微信都没有问题。
然而,后来发现:
虽然苹果微信可以,但是苹果 Safari 中导致视频不能播放,点击也放不起。
虽然华为浏览器可以,但是有几款华为微信中导致视频不能播放,点击也放不起(极偶尔情况能放起)。
还有就是视频加载中、视频播放完成后,就不能上下滑了。
后来取消 touchstart、touchmove 事件就可以了,看来大家对视频标签的对待太不相同了。
怎么解决?
我觉得是不是可以用 onscroll 来解决。
将网页内容设置为 100% 高度。
然后再在 100% 以外的顶部插入一定的空白区域。
然后再在 100% 以外的底部插入一定的空白区域。
然后初始时将页面滚动至内容区,使看起来整个页面显示完全了的,
当用户滑动时,响应 onscroll,当一定高度的空白区域露出来之后,就进行页面跳转,进行视频切换,为了使体验更友好,可以在跳转前加个定时器,如果用户在定时器内又把页面滚回去了,就不去进行视频切换。为了让效果更好,当只露出少部分空白区域时,如果一定时间没操作,又滚动至初始位置。