<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 | '' |
| 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表示当前视频序号。 |