滑动播放短视频
本项目基于 github 项目 Vue_Douyin 对原有视频播放模块进行二次开发；原项目作为示例 poc，只做了基本功能的视频 + 滑动播放组合，且在生产环境（真机调试）有很多未解决的 bug，本项目经过真实生产环境检验，修复了绝大部分遗留 bug，解决了移动端安全区域遮挡等显示问题，具体效果可以下载代码本地调试。
yarn install
yarn run serve
# http://localhost:8000修复问题记录
-
swiper上的tap事件不能阻止冒泡； - 点赞，评论，分享按钮被
video标签遮挡，导致闪烁； -
virtual slide虚拟滚动实现问题； - 部分安卓机，竖版视频不能自动撑开高度问题；
- slideNextTransitionStart，slidePrevTransitionStart 在
virtual slide场景下，部分手势不触发问题； -
swiper slide在overflow：hidden场景下依然出现滚动效果（偶现）； - 手机锁屏，切换应用到后台再回来，部分安卓机型视频播放卡住，需要点击 2 次屏幕才能触发播放；
-
window.innerHeight在首次进入页面，表现不一致的问题，改用document.documentElement.clientHeight解决；http://t.zoukankan.com/xiaoyucoding-p-7593864.html - 手机侧滑返回，视频页面高度塌缩问题（document.documentElement.clientHeight 在侧滑返回取值不准确）；
- this.player.videoWidth(), this.player.videoHeight()，在安卓机型获取不到值（未解决）；
涉及技术栈
- vue + vuex + vue-router
- vantui
- axios + mockjs
- 移动端自适应布局（vw）
- vue-awesome-swiper（虚拟滚动）
- vue-video-player
- less style
- svg 图标（svg-sprite-loader）
部分页面截图
视频滑动页
视频分享页
如果觉得不错给个小星星
有任何问题可以提 issue 讨论，欢迎交流；