Around the Spring Festival, I received a demand that the live stream should be played. Click to switch the live stream. The specific display form is page-turning display, with 3 on each page.

After I got the requirements, the videoJS component came to my mind first. First, I realized the functions of live streaming without turning pages and clicking to switch. This project is a VUE framework. Step 1: Install the VideoJS component, NPM I VideoJS Step 2: Import VideoJS in the page

Step 3: Get the data, instantiate three VideoJS objects (here the page requires a page to display three), THE method I use is to put the instantiated VideoJS objects into an array for temporary storage

Step 4: More requirements, we want to make the first live play automatically, using the Play method and the volume property provided in VideoJS, play method to control the play, volume property to control the volume, here is the videoJS instantiation object array first SRC assignment and play

Step 5: Realize the video play click switch function, which is the same as the principle of the first live broadcast. Save the serial number of the clicked live broadcast, and then call play method for the live broadcast corresponding to the subscript of the VideoJS play array.

Here the basic realization of live streaming playback and switching functions. Then it was time to implement the second requirement, page turning. The first thing that came to mind was the swiper component.

NPM install Swiper

Step 2: Import Swiper, including its CSS file

Step 3: Implementation swiper page structure, because of three pages, to just live here array into a two dimensional array, each consists of three elements of an array, use two loop method, make each live normal, according to each live id cannot be repeated here, can through the outer and inner circulation index to calculate, two loops below

Step 4: When swiper turns the page, if the page has a broadcast, pause the broadcast, and then call The VideoJS create when the page of 3 live objects, so that the first broadcast of the page automatically play.

In this development, the first problem we encountered was that the one-dimensional array was not very good at solving the problem of three one-page arrays, so we changed to two-dimensional arrays in groups of three. Then empty the VideoJS array when turning the page, stuff the array of VideoJS objects into the page, and then automatically let the first live stream of the page play automatically.

Summarize the requirements developed before, if you have a better way, welcome to reply ha ~