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

This article mainly explains "how to achieve the video playback and stop function in the Mini Program video list", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to achieve the playback and stop function of videos in the Mini Program video list.

Mini Program, which is similar to a video, is a list of videos, and then each video is covered with a video cover image, click the play button of the cover image, and when you click on another video, stop playing the current video and play the clicked video. Something like this:

A video

First, put the code:

Wxml

{{item.title}} {{item.description}} {{! item.upStatus?' Expand': 'put away'}}

Js

VideoPlay (event) {var index = video.getDataSet (event, 'index') If (! this.data.videoIndex) {/ / play video this.setData ({videoIndex: index}) var videoContext = wx.createVideoContext ('video' + index) videoContext.play ()} else {var videoContextPrev = wx.createVideoContext (' video' + this.data.videoIndex) videoContextPrev.stop () this.setData ({videoIndex: index}) var videoContextCurrent = wx. CreateVideoContext ('video' + index) videoContextCurrent.play ()}}

On the page layout, we position the cover image of the video in the video container and the play button in the video container with the highest level. Because the demand is to click the play button on the cover image to start the video, set show-center-play-btn to flase. When the loop binds the data, the loop index is spliced into the video ID, and the loop index is bound to the play button as an attribute.

In JS, we first set videoIndex to represent the position of the currently played video in the list, with an initial value of null.

Playback and pause of video

When a click event occurs, first get the index of the click, and then judge the value of videoIndex:

If the videoIndex value is null, it means that this is the first click, bind index to videoIndex, then get the currently clicked video through var videoContext = wx.createVideoContext ('video' + index), and play the video using videoContext.play ().

If the value of videoIndex is not null, it means that this is not the first time we click. We should first stop the video we are playing, and then play the video we clicked. At this point, the value of videoIndex indicates the position of the video being played in the list. We get the context of the video being played by var videoContextPrev = wx.createVideoContext ('video' + this.data.videoIndex), and then stop it by videoContextPrev.stop (). Finally, we re-bind the obtained index value to the sequence number on videoIndex to indicate that we click on the video, and then repeat step 1.

Cover image processing

We have dealt with the cover image and the play button on the cover image, just use the wx:if or hidden of Wechat. When videoIndex equals index, it means to play the video, show and play the video, and hide the cover image and the play button.

A little pit.

At first, considering the performance, because wx:if does not render data when the page is loaded, frequent clicks render data frequently, which affects performance a little, so we use the hidden method. There is no problem with the cover image and the play button using the hidden method. When dealing with video, sometimes the video is not played and the middle play button is displayed, so wx:if is used. In this way, the page does not render the video at the beginning of the rendering, click to render the video, and set the video to play automatically, which is fine.

At this point, I believe that "how to achieve the Mini Program video list of video playback and stop function" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.