How to use the video component in WeChat Mini Programs?
Published: 2021-12-15
In a Mini Program, you can use the video component to play the video you want to display. The specific steps are as follows:
I. Add a video component
1. Click "Store" — "Decorate Store" — "Edit" to enter the Mini Program page editor.

2. Click "Component Library" — "Video"; a video component will be added to the page. Click "Edit" on the video component.

3. There is a link on the right side of the page editor. Just enter the video link. If you are using a video stored by yourself, you can directly select "Mini Program Video".
If you are using Tencent Video, you need to enable the Tencent Video plugin and copy the Tencent Video link address.

II. Video Link Display Methods
1. Mini Program Video (Recommended)
Advantages:
①. There is no size limit for uploading videos, no need to wait for review (uploading illegal content is prohibited), and it is convenient to obtain the link.
②. You can use platform authorization without self-publishing, making one-click publishing simpler.
See Section III for setup details. It is recommended to purchase our company's FSS Object Storage to save videos and add links.
2. Tencent Video
Advantages: Free
Disadvantages:
①. There are various restrictions and even review failures; videos will be watermarked with Tencent Video, and ads will appear before video playback, resulting in a poor user experience.
②. The Mini Program needs to be used under self-publishing mode. If it is currently platform publishing, you need to switch to self-publishing mode. See the self-publishing mode tutorial for details https://www.west.cn/faq/list.asp?unid=2396
③. You need to upload a code package with video. If it is not a code package with video, you need to re-download the code package containing video and upload it through WeChat Developer Tools.
See Section IV for setup details.
III. Use our company's FSS Object Storage to add a video link (if you plan to use Tencent Video, please ignore this step)
1. Purchase. It is recommended to choose annual billing, which is more convenient because the Mini Program is charged annually. Choosing annual billing for FSS can synchronize with the Mini Program's usage period. You can choose the default configuration of 100G space and 100G traffic, or choose the space and traffic size according to your own situation.

2. Click "Cloud Storage Management" — "FSS Object Storage" — "File Management".

3. To facilitate management, click New Directory. The demo site created an APP directory, then created a movie directory under the APP directory to save videos. Then click "Upload" to upload videos.

4. Drag the file into the dashed box or click "Click to Upload" to find the file and upload it.

The uploaded file cannot exceed 50M. If you want to upload large files, you can use FTP to upload. FTP information is as follows:

5. In order for external access to work properly, you need to click "Permissions" and change the Bucket anonymous access permission setting to "Public Read".

6. In File Management, find the video that needs to be linked. Click the arrow after Download and select "Copy Access Path".

7. In the Mini Program's video component, paste the link you just copied (the copied link is in https format), then click Save.

Friendly reminder: For users to access smoothly under 4G or 5G networks, it is recommended to use the following video parameters:
Encoding format: It is recommended to use MP4 format videos based on H.264 encoding.
Resolution: Because mobile phone screens are limited, 720P or 1080P resolution is recommended.
Bitrate: It is recommended to keep it around 1Mbps.
IV. Use a Tencent Video Link to Add a Video Link (if you are using our company's FSS Object Storage to add a video link, please ignore this step)
1. Enable the plugin: 1. On the WeChat platform (mp.weixin.qq.com) - Settings - Third-party Settings - Plugin Management, add the Tencent plugin.

2. In "Store" - "Plugin Management", enable the Tencent Video component. (If you did not perform the first step, you will not be able to enable this component.)

3. Obtain a Tencent Video link and add the Tencent Video link.

