微短剧场景快应用SDK AliSwiper的集成方法_视频直播(LIVE)-阿里云帮助中心

本文为您介绍微短剧场景快应用SDK AliSwiper。通过阅读本文，开发者可以通过安装快应用调试器和集成快应用SDK环境来体验和使用AliSwiper。

SDK简介

微短剧场景快应用SDK AliSwiper是一款增强版快应用swiper组件，提供上下滑动播放的沉浸式体验，助力您高效开发微短剧快应用。

AliSwiper提供以下核心能力：

视频预加载：利用本地缓存机制实现视频预加载，从而提供无缝流畅的播放体验。
列表播放管理：整合原生swiper和video组件，简化播放API管理，实现自动化接入。
Swiper 手势优化：在保留原生swiper事件自定义能力的基础上，优化滑动手势，提升刷剧和拖拽seek的交互体验。

使用限制

微短剧场景快应用SDK AliSwiper的强大功能依托于快应用服务框架提供的网络请求、数据缓存、swiper组件、Wasm等核心能力。目前，主流的快应用服务框架版本为1100+。为确保兼容性，SDK最低支持的快应用服务框架版本为1060+。

Demo体验

安装快应用调试器

运行快应用程序需要先安装快应用调试环境。
从《快应用》官网获取快应用调试器，下载地址请参见：资源下载。
下载安装后，运行快应用调试器。

下载Demo

项目	地址
rpk安装包	https://player.alicdn.com/file/aliyun.quickapp.swiper.demo.debug.1.0.0.rpk
源码	https://player.alicdn.com/file/quickapp-aliswiper-demo.zip

运行Demo

运行快应用调试器，单击本地安装，从本地文件目录选择下载的.rpk包，即可开始运行。

说明

请确保您的Android设备支持快应用框架，目前已有12家品牌手机厂商支持：

vivo
华为
OPPO
小米
联想
金立
魅族
中兴
努比亚
一加
海信
荣耀
中国移动终端公司

以上排名不分先后。

集成快应用SDK

环境准备

开发快应用程序，需要安装快应用联盟提供的IDE与快应用调试器。详情参考：开始开发。
安装node环境，推荐使用版本node 16。
创建快应用项目并安装快应用依赖。
执行npm install命令。

安装

微短剧场景快应用SDK AliSwiper支持npm下载方式，详情请参见npm。

在项目根目录中运行：

npm install ali-swiper --registry https://registry.npmjs.org

引用

微短剧场景快应用SDK AliSwiper作为一个快应用UX组件引入。

<import name="ali-swiper" src="/node_modules/ali-swiper/dist-npm/aliswiper.bundle.ux"></import>

在template中，AliSwiper作为一个自定义组件（标签）使用。

<template>
  <ali-swiper id="ali-swiper-sdk" play-list="{{playList}}" debug="true">
  </ali-swiper>
</template>

通过play-list属性传入播放信息，AliSwiper将提供基础的列表播放能力与预加载。

更多用法请参考API接口与Demo源码。

接口说明

props属性

属性	数据类型	说明
playlist	{ // 播放地址 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'，首帧速度体验将得到保证。
initialIndex	number	初始index后续由SDK自动管理。
debug	Boolean	开启debug。
license	String	License校验key。
reachTopText	String	滑动到顶部的提示文案。
reachBottomText	String	滑动到底部的提示文案。
playMode	‘auto-play-next’	自动播放下一集。
skipLicense	Boolean	跳过license检测。
skinLayout	Object	skinLayout对象控制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界面背景仅华为、oppo框架生效 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, // 底部距离 } }

事件

Swiper事件

事件	类型	说明
change	{index}	当前内容发生改变时触发。
reach-bottom	{index}	刷到列表最后一个。
reach-top	{index}	刷到列表第一个。

Video事件

事件	类型	说明
play	{index}	首次播放、卡顿恢复。
pause	{index}	暂停。
canplay	{index}	能够播放。
timeupdate	{index, currentTime}	时间更新。
ended	{index}	播放完成。

方法

方法	类型	说明
swipeTo(index)	index: number 说明表示跳转到index序号位置。	组件方法，用于指定Swiper的播放位置。