短视频小程序基于阿里云的视频点播服务在微信小程序内实现视频上传、视频列表、视频播放的完整Demo。通过阅读本文,您可以快速搭建短视频小程序Demo。

前提条件

在开发短视频小程序前,请完成以下操作。
类别 说明
移动设备 可以进行微信登录的移动设备。
短视频服务端和控制台 完成服务端和控制台的搭建。具体操作,请参见服务端集成控制台集成
阿里云视频点播服务 完成视频点播服务的相关配置。具体操作,请参见开通与配置VOD服务

Demo运行指引

  1. 下载并解压短视频小程序Demo
  2. 获取微信测试账号的AppID。
    申请地址请参见申请测试号
    使用移动设备上的微信扫描二维码,获取AppID,记录并妥善保管。AppID
  3. 下载电脑系统对应版本的小程序开发工具
    说明 建议使用稳定版Stable Build进行开发。
  4. 导入源码。
    1. 单击小程序项目 > 小程序
    2. 在目录中选择解压后的短视频小程序Demo。
    3. 填写申请好的小程序AppID。
      具体操作,请参见获取小程序AppID
    4. 单击新建
    导入源码
  5. 修改配置文件。

    Demo中使用的服务端地址是阿里云官方Demo服务器地址,您可以修改为趣视频服务端集成的云服务器(ECS)公网IP地址,并添加端口号(8080)。

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

      示例

      假设您的公网IP地址为192.0.2.0,则将player.js文件第2行的服务端地址修改为http://192.0.2.0:8080

      修改服务端地址
    • 修改pages/sts/sts.js文件中的上传地址。

      修改sts.js文件第37行的URL:服务端地址/demo/getSts。

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

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

      示例

      假设您的公网IP地址为192.0.2.0,则将sts.js文件第37行的URL修改为http://192.0.2.0:8080/demo/getSts,将第68行的URL修改为http://192.0.2.0:8080/vod/videoPublish

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

      修改上传地址
  6. 真机调试。
    单击真机调试,使用微信扫描二维码。

后续步骤

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

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

示例

假设您的公网IP地址为192.0.2.0,控制台地址为http://192.0.2.0:8080/resource/short-video/index.html#/videos