Use Tencent Video Plug-in Play Tutorial Video in a small program

In a small program we developed, in order to understand some tutorial content to customers, we need to add a module of online playing video, considering the video that directly using the video component playback server, so use Tencent video plugin to Playing the final test success. This article introduces WeChat small procedures to use video components and Tencent video plug-ins, and focus on the processing process of video plug-in.

1, use video components to play video

Since it is our own recorded video content, I originally wanted to play the video on your own server directly through video components. Plenty, realistic is very bone, I don’t know if it is the reason for the interior of the video or Tencent prohibition. Although it can be played when testing on the development tool, it is not possible to play the video when it is finally released, but here is also introduced to video components. Playback processing mode.

The simplest code should be as follows.

    We can put it in order to realize the data binding of dynamic URLs Some variables are placed in a separate file or can be dynamically obtained according to the API interface. 
For example, I placed a fixed array of fixed video in a config.js, as shown below

videos: [{ID: 0, SRC: ‘Dictionary Management Module Introduction. MP4’, Poster: ‘Dictionary Management Module Introduction .png’, VID: ‘I0690AGM8UF’}, {ID: 1, SRC: ‘Paging Control Introduction. MP4’, Poster: ‘Paging Control Introduction .png ‘, VID: ‘F06919DLVI9’}, {ID: 2, SRC: ‘Common Category Library Introduction. MP4’, POSTER: ‘Common Category Library Introduction .png’, VID: ‘P0686rsvwbx’}, {ID: 3, SRC: ‘ The incremental development process of the WEBAPI access of the mixed frame. MP4 ‘, POSTER:’ The incremental development process of the WEBAPI access of the mixed frame. Png ‘, VID:’ D0688O38MKK ‘}, {ID: 4, SRC:’ Winform Frame Incremental development process. MP4 ‘, POSTER:’ WinForm frame increment development process .png ‘, VID:’ F06919DLVI9 ‘}, {ID: 5, SRC:’ Mixed frame picture display and storage .mp4 ‘, Poster:’ mix Frame picture display and storage .png ‘, vid:’ f06919dlvi9 ‘}, {id: 5, src:’ mixed frame increment development process. MP4 ‘, POSTER:’ Mixed frame increment development process .png ‘, VID:’ E0686JWU3FF ‘},],

Then simultaneously define a base URL address, as shown below.

Then in the JS file on the page, we can introduce this file and assign a value to the page object.
  / / Get the configuration of the address const config = Require ("../../ utils / config.js"); Page ({/ ** * page Initial data * / data: {Video: [], viDEO_BASE_URL: ',}, / ** * Lifecycle Function - Listening Page Load * / Onload: Function (Options) {var That = this; That.SetData ({Video: config.videos, Video_Base_URL: config.video_base_url}  
The video component is then defined on the interface.



In this way we can see the show on the development tool, and can also play, but tragedy is unable to release it on mobile phone. I saw the video, which also introduces the use of Tencent video play plugins.

2, use Tencent video plug-in to play video
   Since we can't play video directly on your own server, then we put it Upload it to the Tencent video server and use the Tencent video's small program plugin to process.   Register a Tencent video account and then upload your video content on the client.    After uploading successful video, we open video playback, found the following menu in the video information on the right     Then check the web information, you can see the VID parameters of the video.   
Tencent video plugin is played using this VID parameter.
Before using the video plug-in, let’s introduce how to get this plugin.The small program plugin requires the developer to agree to obtain the right to use, we can see the corresponding entry in the [Setting-> Third Party Service] of the applet.

在小程序中使用腾讯视频插件播放教程视频的方法 Add corresponding plugins, here is Tencent video, as shown below.

After adding a video, the APPID of the video can be used for use, as follows is the information of this plugin.

Official introduction and use page code is as follows

在小程序中使用腾讯视频插件播放教程视频的方法 The plug-in using this applet still needs to follow the applet Several steps using the plug-in, detailed description thereof.

First need to join the declaration of the plugin in app.json, as shown below.


In the page JS code, add the definition of the plugin object, and if you do not use the video plugin in the script, you can also use this line of code


Const TXVContext = RequirePlugin (“TencentVideo”);

Added code in the page





Lastly pays attention to the debug basic class library of the project, choose a new, otherwise sometimes too low version is estimated that the development tool can not test, I just forget the basic library here, causing always There is still no reason for an error. 在小程序中使用腾讯视频插件播放教程视频的方法

The effect of the final mobile phone is as follows, the only regret is that each video is going to play an advertisement, depressed.

In general, it is also very convenient and concise, but the first use always encounters some problems, just habits. 在小程序中使用腾讯视频插件播放教程视频的方法

There is also Tencent video to be in Tencent servers, or you can reduce your own server’s access pressure, you can also share it with other friends, it is also very good.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment