Ali-swiper NPM

AliSwiper：增强的快应用 swiper 插件

使用方式

<import name="ali-swiper" src="/node_modules/ali-swiper/dist-npm/aliswiper.bundle.ux"></import>
<template>
    <ali-swiper id="ali-swiper-sdk" play-list="{{playList}}" initial-index="0"> <ali-swiper/>
</template>
<script>
    export default {
        private: {
            playList: [
                { type: 'video', url: 'https://xxx', relatedList: [{ url: '' }] },
                { type: 'video', url: 'https://xxx', relatedList: [{ url: '' }] }
            ]
        }
    }
</script>

参数

prop	type	explanation	default value
play-list	Array\|playItem[]	playItem: { url: string, relatedList: { url: string } }播放列表数组参数platList，是一个由playItem组成的数组。playItem结构包含两个变量：url与relatedList。url是每个视频的播放地址，string类型，必选参数。relatedList用于页面跳转时的预加载优化，数组类型，非必选参数。数组项为Object类型，仅包含一个名为url的string类型变量，形如：{ url: 'xxx' }举例，传入如下playList 到 'play-list' prop中playList = [ { url: 'https://video1-1.mp4', relatedList: { url: 'https://video1-2.mp4' } }, { url: 'https://video2-1.mp4', relatedList: { url: 'https://video2-2.mp4' } }]此时，会生成长度为2的滑动列表，播放'video1-1.mp4'与'video2-1.mp4'。当播放'video1-1.mp4'时，ali-swiper会自动预加载下一个视频'video2-1.mp4'。当视频'video1-1.mp4'播放进度接近完成时，ali-swiper会额外预加载relatedList传入的'video1-2.mp4'，以备页面跳转之需。页面跳转后，重新初始化ali-swiper，如果此时播放的首个视频是'video1-2.mp4'，首帧速度体验将得到保证。	[]
initial-index	number\|string	0 \| '0'播放列表初始位置（序号index）。仅支持初始化时传入，后续将由SDK内部管理。如果需要主动切换当前播放的视频，请使用方法swipeTo(index)。	0
play-mode	'auto-play-next'	字符串枚举类型，目前仅支持'auto-play-next'表示播放完成时，自动播放下一集，传入其他则无效。	''
debug	boolean	是否开启debug模式，开启后ali-swiper界面会显示当前视频与预加载视频等信息，帮助开发调试。	false
reach-top-text	string	滑动到顶部时的提示文案	'已经滑到顶啦～'
reach-bottom-text	string	滑动到底部时的提示文案	'已经滑到底啦～'
play-failed-hint-text	string	播放出错时的提示文案	'网络不好...请重试'
license	string	49位的licenseKey	''
skip-license	boolean	跳过license检测	false
skin-layout	Object	配置UI位置与样式skinLayout: { controlBar: { progress: { // 进度条 bottom: 20, // 底部距离 border: 8, // 进度条粗细 r: 255, // 进度条颜色 rgba r值 g: 0, // 进度条颜色 rgba g值 b: 255, // 进度条颜色 rgba b值 a: 0.8, // 进度条颜色 rgba a值 } }, seekingSurface: { // seek界面背景 width: 200, // 宽度 height: 200, // 高度 bottom: 100, // 底部距离 left: 0, // 左侧距离 radius: 5, // 圆角大小 r: 255, // 背景颜色 rgba r值 g: 0, // 背景颜色 rgba g值 b: 255, // 背景颜色 rgba b值 a: 0.8, // 背景颜色 rgba a值 }, playButton: { // 播放按钮 left: 20, // 左侧距离 bottom: 120, // 底部距离 }, retryButton: { // 重播按钮 left: 220, // 左侧距离 bottom: 120, // 底部距离 }}	{}

方法

Name	Params	explanation
swipeTo	index: number	将ali-swiper切换到第index视频进行播放。

事件

Event	Params	explanation
change	index: number	当前视频发生变化时触发，index表示当前视频序号。
reach-top	index: number	滑动到顶部时触发，index表示当前视频序号。
reach-bottom	index: number	滑动到顶部时触发，index表示当前视频序号。
canplay	index: number	当前视频缓冲到可播放时触发，index表示当前视频序号。
play	index: number	视频开始播放时触发，包括暂停后再次播放，index表示当前视频序号。
pause	index: number	视频暂停时触发，index表示当前视频序号。
timeupdate	index: number, currentTime: number	视频播放进度发生变化时触发，index表示当前视频序号，currentTime表示当前播放时长。
ended	index: number	视频播放完成时触发，index表示当前视频序号。