产品百科 ｜快速搭建短视频小程序 Demo

短视频小程序

短视频小程序提供了微信小程序端 SDK，支持播放，视频上传等功能。详情请参见

微信小程序上传

。

短视频小程序和趣视频解决方案共用一套后端及 Web 控制台，配合小程序前端完成视频获取、播放、上传、审核、推荐等功能。您需要配置趣视频解决方案的后端以及控制台，具体操作，请参见

服务端集成

、

控制台集成

实现流程

实现流程如下图所示：

步骤	操作	描述
1	开通与配置 VOD 服务	搭建趣视频服务端之前，您首先需要开通并配置 VOD 服务。
2	开通与配置 ECS 服务	建议将 Demo 服务端搭建在 ECS 服务器上。因此您需要开通并配置 ECS 服务。
3		在开通和配置 VOD 和 ECS 服务后，您需要搭建趣视频服务端。
4		完成服务端搭建后，您需要搭建趣视频管理控制台来管理用户上传的视频。
5	小程序集成	完成服务端及控制台搭建后，您需要搭建小程序端来播放、上传视频。

前提条件

在开发短视频小程序前，请完成以下操作。

类别	说明
移动设备	可以进行微信登录的移动设备。
短视频服务端和控制台	完成服务端和控制台的搭建。具体操作，请参见
阿里云视频点播服务	完成视频点播服务的相关配置。具体操作，请参见

Demo 运行指引

1. 下载并解压 短视频小程序 Demo
2. 获取微信测试账号的 AppID。申请地址请参见 申请测试号 使用移动设备上的微信扫描二维码，获取 AppID，记录并妥善保管。

   

3. 下载电脑系统对应版本的 小程序开发工具 说明 建议使用稳定版 Stable Build 进行开发。
4. 导入源码。

1. 1. 单击小程序项目 > 小程序。
   2. 在目录中选择解压后的短视频小程序 Demo。
   3. 填写申请好的小程序 AppID。具体操作，请参见 获取小程序 AppID
   4. 单击新建。

      

1. 修改配置文件。Demo 中使用的服务端地址是阿里云官方 Demo 服务器地址，您可以修改为趣视频服务端集成的云服务器（ECS）公网 IP 地址，并添加端口号（8080）。

• • 修改 service/player.js 文件中第 2 行的服务器地址。示例

    假设您的公网 IP 地址为 192.0.0.1，则将 player.js 文件第 2 行的服务端地址修改为

    http://192.0.0.1:8080

    

  • 修改 pages/sts/sts.js 文件中的上传地址。修改 sts.js 文件第 37 行的 URL：服务端地址 /demo/getSts。

    修改 sts.js 文件第 68 行的 URL：服务端地址 /vod/videoPublish。

    修改 sts.js 文件第 61 行的 URL：视频点播加速域名。详情请参见

    示例

    假设您的公网 IP 地址为 192.0.0.1，则将 sts.js 文件第 37 行的 URL 修改为

    http://192.0.0.1:8080/demo/getSts

    ，将第 68 行的 URL 修改为

    http://192.0.0.1:8080/vod/videoPublish

    假设您在视频点播中设置的加速域名为 test.com，则将 sts.js 文件第 61 行的 URL 修改为

    http://test.com/

    

1. 真机调试。单击真机调试，使用微信扫描二维码。

后续步骤

视频上传成功后，可以在控制台看到上传的视频并进行管理，待审核完毕之后，可在播放列表观看。

控制台地址：http:// 服务端地址 /resource/short-video/index.html#/videos。

假设您的公网 IP 地址为 192.0.0.1，控制台地址为

http://192.0.0.1:8080/resource/short-video/index.html#/videos

「视频云技术」你最值得关注的音视频技术公众号，每周推送来自阿里云一线的实践技术文章，在这里与音视频领域一流工程师交流切磋。