微信小程序实现多视频-video踩坑之路

M_zhamin

于 2021-07-10 17:00:09 发布

阅读量1.2k

点赞数 3

分类专栏：短视频文章标签：前端

本文链接：https://blog.csdn.net/MZHAMIN/article/details/118636869

版权

本文分享了作者在微信小程序中实现多视频上下滑动播放的探索过程，包括遇到的问题和解决方案。首次尝试使用video元素和touchmove手势，但滑动体验不佳且易卡顿。最终通过结合swiper组件、video元素和view定位，成功实现流畅的滑动播放效果，同时利用cover-view处理视频介绍和覆盖内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

经过一周对多视频上下滑动播放的摸索，终于得到了可观的成绩，接下来先讲一下我的摸索之路。
介绍：video这个层级非常高，如果要在video上面放一些视频介绍必须要用到cover-view,而cover-view里面只支持嵌套 cover-view、cover-imag，button，而且内部cover-view样式如果要用position:fixed的话，在它外面必须也要加上position:fixed才可以显示，反正就是问题多多
1、第一次尝试单单用了video进行循环播放，touchmove手势,cover-view覆盖
结果：滑动体验差且视频一多容易卡顿
2、最终：采用swiper+video+view搞定成功，要想滑动体验舒服，就要图片轮播的感觉，要想轮播的有视频就加video,要想视频上面覆盖一些信息，就在跟vidoe同级地方用position:absolute

<swiper class="video_box" duration="200滑动动画的时长" vertical="true滑动纵向" bindchange="set_key" easing-function="easeInOutCubic滑动的动画类型">
    <block wx:for="{
    { msg 视频列表 }}" wx:key="index">
      <swiper-item class="video_list

最低0.47元/天解锁文章