Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use WeChat Mini Programs Video component Library video". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use WeChat Mini Programs Video component Library video".

Video

Video.

The default value of the attribute name type indicates the resource address of the minimum version of srcString to play the video durationNumber specifies whether the video duration 1.1.0controlsBooleantrue displays the default playback controls (play / pause button, playback progress, time) danmu-listObject Array on-screen comment list danmu-btnBooleanfalse displays the on-screen comment button, which is valid only during initialization, and cannot dynamically change whether the enable-danmuBooleanfalse displays on-screen comment, only during initialization Cannot dynamically change whether autoplayBooleanfalse plays automatically, loopBooleanfalse loops, 1.4.0mutedBooleanfalse mutes, 1.4.0bindplayEventHandle triggers play events when starting / resuming playback, bindpauseEventHandle triggers pause events when playback is paused, bindendedEventHandle triggers ended events bindtimeupdateEventHandle playback progress changes when playback comes to the end, event.detail = {currentTime: 'current playback time'}. Trigger frequency should be 250ms once bindfullscreenchangeEventHandle when the video enters and exits full screen is triggered, event.detail = {fullScreen: 'current full screen status'} 1.4.0objectFitStringcontain when the video size is not consistent with the video container size, the video presentation. Contain: contains, fill: fills, cover: overrides the image resource address of the audio cover on the posterString default control. Setting poster is invalid if the controls attribute value is false.

The video tag recognizes the width 300px and height 225px. Setting width and height requires setting width and height through wxss.

Sample code:

Get video, get video, send on-screen comment function getRandomColor () {let rgb = [] for (let I = 0; I < 3 + + I) {let color = Math.floor (Math.random () * 256) .toString (16) color = color.length = = 1?'0' + color: color rgb.push (color)} return'#'+ rgb.join ('')} Page ({onReady: function (res) {this.videoContext = wx.createVideoContext ('myVideo')}, inputValue:', data: {src:'' DanmuList: [{text:'1s on-screen comment', color:'# ff0000', time: 1}, {text:'on-screen comment on 3rd s', color:'# ff00ff', time: 3}]}, bindInputBlur: function (e) {this.inputValue = e.detail.value} BindButtonTap: function () {var that = thiswx.chooseVideo ({sourceType: ['album',' camera'], maxDuration: 60, camera: ['front','back'], success: function (res) {that.setData ({src: res.tempFilePath})})}, bindSendDanmu: function () {this.videoContext.sendDanmu ({text: this.inputValue) Color: getRandomColor ()}}) Bug & Tip

The tip:video component is a native component created by the client, and its level is the highest.

Tip: do not use video components in scroll-view.

Tip:css animation is not valid for video components.

Thank you for your reading, the above is the content of "how to use WeChat Mini Programs Video component Library video". After the study of this article, I believe you have a deeper understanding of how WeChat Mini Programs Video component Library video is used, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.