Small program realizes small window function

Renderings:

Under normal circumstances: After exiting the live broadcast room normally, you can add the officially supported small window display function. During the use of the small window, it will not affect the use of other interfaces and the coexistence state

user terminal:

 

Anchor section:

 

In exceptional circumstances:

1. When the small window is suspended for a long time, or when there is a problem with the anchor network, the small window will have loading loading, and clicking to enter the live broadcast room will be normal

 

2. During the live broadcast, the anchor turned off the video function. Although other styles can be added in the live broadcast room, the small window display is a black screen

Specific use

//拉流端
<live-player
	picture-in-picture-mode="{
   
   {['push','pop']}}"
></live-player>
    
 //推流端
<live-pusher
	picture-in-picture-mode="{
   
   {['push','pop']}}"
></live-pusher>

Official api description:

1, picture-in-picture-mode small window method,

Supported applet container tags:

1. video tag

2、live-player

3、 live-pusher

Specific properties: empty string or via array form

[]	Cancel small window
push	Trigger small window when routing push
pop	Trigger small window when routing pop

Small window feature description

The live-player widget supports the following three trigger modes (set the picture-in-picture-mode property on the component):

1. Push mode, that is, a small window appears when jumping from the current page to the next page (page stack push)
2. pop mode, which triggers when leaving the current page (page stack pop)
3. The above two routing behaviors both trigger the small window

In addition, widgets also support the following features:

• The size of the small window container will be automatically judged according to the size of the original component
• Click on the widget, and the user will be navigated back to the player page corresponding to the widget
• After the small window appears, the user can click the close button in the upper right corner of the small window or call the context.exitPictureInPicture() interface to close the small window

When the player enters the small window mode, the page where the player is located is in the hide state (the onHide life cycle is triggered), and the page will not be destroyed. When the widget is closed, the page where the player is located will be unloaded (trigger the onUnload life cycle).

Points to note during the research:

1. The WeChat payment function has the best priority. When entering the WeChat payment interface, there will be no small window interface

2. The small window function is unavailable once you exit the small program.

3. The small window function applet cuts out the WeChat interface, which is also unavailable

4. When the anchor closes the video, although some other styles can be added to the normal page to prompt, the small window will only display a black screen effect