短視頻小程序基于阿里云的視頻點播服務在微信小程序內實現視頻上傳、視頻列表、視頻播放的完整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。