仿抖音上下滑动播放视频（兼容安卓，ios，小程序，h5）

HBuilder X 2.2.2

安装后，从插件市场导入，即可真机运行

vue

项目地址

github

uniapp插件市场

说明

插件分别用swiper实现(多端兼容)和css3动画实现(暂时只支持app)，可自行切换。

插件在uni-app编译模式下编写(已切换)。

默认为weex编译模式，在 manifest.json 的源码视图里配置是切换模式， manifest.json ->app-plus ->nvueCompiler 切换编译模式。

swiper在非App端内嵌video性能比较差，不建议导入过多视频。

项目效果

h5在线地址

jQuery -- touch事件之滑动判断，当上划超过30px切换下一个视屏，调换<video>中的 src。

错误思路：原本想用swiper循坏<video>显示，视觉效果可以达到，但是会把所有的视屏都加载出来，虽然界面只显示一个视屏，但是能听到所有的音频。

HTML

CSS

JS

最后附上<video>标签的参数，根据需求添加

有个坑：页面有点赞功能，发现不能触发任何click事件

preventDefault)()限制了页面上的任何事件，包括click事件

最终效果