The short video miniapp is a complete demo built on Alibaba Cloud ApsaraVideo VOD. It shows how to upload, list, and play videos within a WeChat mini program. This topic describes how to quickly set up the short video miniapp demo.
Prerequisites
| Category | Description |
| Mobile device | A mobile device that you can use to log on to WeChat. |
| Short video server-side and console | Set up the server-side and console. For more information, see Server-side integration and Console integration. |
| Alibaba Cloud ApsaraVideo VOD service | Complete the required configurations for the ApsaraVideo VOD service. For more information, see Activate and configure ApsaraVideo VOD. |
Run the demo
- Download and decompress the short video miniapp demo.
- Obtain the AppID of a WeChat test account.
To request a test account, see Request a Test Account.Use WeChat on your mobile device to scan the QR code. Obtain the AppID, and then save it for later use.
- Download the version of the miniapp developer tool that matches your computer's operating system.
Note Use the Stable Build for development.
- Import the source code.
- Click .
- In the folder, select the decompressed short video miniapp demo.
- Enter the AppID that you requested.
For more information, see Obtaining the miniapp AppID.
- Click New.
- Modify the configuration file.
The demo uses the official Alibaba Cloud demo server address. You must change this address to the public IP address of the Elastic Compute Service (ECS) instance for your ApsaraVideo for Short Video server-side and append the port number 8080.
- Modify the server address on line 2 of the service/player.js file.
Example
If your public IP address is 192.0.2.0, change the server-side address on line 2 of the player.js file to
http://192.0.2.0:8080.
- Modify the upload URL in the pages/sts/sts.js file.
Modify the URL on line 37 of the sts.js file to <Server-side address>/demo/getSts.
Modify the URL on line 68 of the sts.js file to <Server-side address>/vod/videoPublish.
Modify the URL on line 61 of the sts.js file to your ApsaraVideo VOD accelerated domain name. For more information, see Prerequisites.
Example
If your public IP address is 192.0.2.0, change the URL on line 37 of the sts.js file to
http://192.0.2.0:8080/demo/getStsand the URL on line 68 tohttp://192.0.2.0:8080/vod/videoPublish.If the accelerated domain name that you set in ApsaraVideo VOD is example.com, change the URL on line 61 of the sts.js file to
http://example.com/.
- Modify the server address on line 2 of the service/player.js file.
- Test on a real device.
Click Live Debugging and scan the QR code with WeChat.
What to do next
After a video is uploaded, you can view and manage it in the console. After the video passes review, it is available for playback in the playlist.
Console URL: http://<Server-side address>/resource/short-video/index.html#/videos.
Example
If your public IP address is 192.0.2.0, the console URL is http://192.0.2.0:8080/resource/short-video/index.html#/videos.