産品百科 ｜快速搭建短視訊小程式 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

「視訊雲技術」你最值得關注的音視訊技術公衆号，每周推送來自阿裡雲一線的實踐技術文章，在這裡與音視訊領域一流工程師交流切磋。