• video-swiper
    • 效果示例
    • 使用说明
    • 属性列表
      • VideoSwiperItem 属性列表
      • objectFit 的合法值
      • easing-function 的合法值

    video-swiper

    视频滑动切换组件，可实现类似微视无限视频列表效果。

    效果示例

    alt video-swiper

    使用说明

    video-list 的长度应当不低于 3 个，当滚动到首项或者尾项后，会进入循环。通过 setData 更改 video-list，会直接追加到之前的视频源中。可监听 bindchange 事件获取当前滚动到那一个视频，activeId 为视频源的唯一 id。

    属性列表

    属性类型默认值必填说明
    durationnumber500否滑动动画时长
    easing-functionstringdefault否切换缓动动画类型
    loopbooleantrue否是否循环播放
    video-listArray[]true视频源
    bindchangeeventhandle否滑动切换完成时触发, e.detail={activeId}
    bindplayeventhandle否开始/继续播放时触发, e.detail={activeId}
    bindpauseeventhandle否暂停播放时触发, e.detail={activeId}
    bindendedeventhandle否播放到末尾时触发, e.detail={activeId}
    bindtimeupdateeventhandle否播放进度变化时触发，event.detail = {currentTime, duration, activeId}
    bindwaitingeventhandle否视频出现缓冲时触发, e.detail={activeId}
    binderroreventhandle否视频播放出错时触发, e.detail={activeId}
    bindprogresseventhandle否加载进度变化时触发，只支持一段加载。event.detail={buffered, activeId}
    bindloadedmetadataeventhandle否视频元数据加载完成时触发。event.detail={width, height, duration, activeId}

    VideoSwiperItem 属性列表

    属性说明
    id每个视频源的唯一 id
    url视频播放地址
    objectFit当视频大小与 video 容器大小不一致时，视频的表现形式

    objectFit 的合法值

    属性说明
    contain包含
    fill填充
    cover覆盖

    easing-function 的合法值

    属性说明
    default默认缓动函数
    linear线性动画
    easeInCubic缓入动画
    easeOutCubic缓出动画
    easeInOutCubic缓入缓出动画