my.createLivePlayerContext

2023-04-28 21:00

The my.createLivePlayerContext API is used to play live-streaming videos in mini programs. You can call this API to pass playerId, which creates and returns a live-player context object - LivePlayerContext. Here, playerId is customized by the developer in the ID attribute of the corresponding <live-player> tag, and you can use LivePlayerContext to operate a live-player component. For more information about the context object, refer to the LivePlayerContext methods section.

Before you begin

Before calling the my.createLivePlayerContext API, you need to make sure that your container SDK meets the following two requirements:

Your mini-program core library (also known as Appx or Lib) needs to be version 2.0 or later. You can contact your Solution Architect for the update instructions.
The super app where your mini program runs needs to integrate IAPMiniProgram SDK version 2.44.0 or later.

Parameters

The following table lists the request parameters of the my.createLivePlayerContext API.

Property	Type	Default value	Description
src	String	""	The URL of the live-streaming video source. Only RTMP URLs are supported.
mode	String	"live"	The streaming mode of the live video. Valid value is: `live`: Indicates the video is streamed in a live-broadcasting mode, where live voice chats are not supported.
orientation	String	"vertical"	The initial orientation of the video. Valid value is: `vertical`: Indicates the video orientation is vertical when users enter the video playing interface.
onStateChange	Function	N/A	Listener for the following two events: The player's state changes. Refer to the Status codes section for details. The callback errors. Refer to the Error codes section for details.
muted	Boolean	false	Mutes the video or not when it starts playing. Valid values are: `true`: Indicates to start playing the video in mute. `false`: Indicates to start playing the video with sound.
onFullScreenChange	Function	N/A	Listener for the screen rotations in the fullscreen mode. Valid values are: `90`: The screen is rotated in the anticlockwise direction by 90 degrees. `0`: The screen is rotated to the normal upright position. `-90`: The screen is rotated in the clockwise direction by 90 degrees.

LivePlayerConetxt methods

The following table lists the methods you can use to operate a live-player component.

Method	Description
play	Starts playing the video.
pause	Pauses the video.
resume	Continues to play the video. You can use this method to operate paused videos (with the `pause` method) only, which means the method cannot be applied to ended videos (with the `stop` method).
stop	Stops playing the video.
mute	Mutes the video or not. You can pass a JSON object to change the sound setting with either of the following two valid values: `true`: Indicates to mute the video `false`: Indicates to unmute the video. The request code sample can be as follows: `{ison:true,}`.
requestFullScreen	Enters the fullscreen mode. You can pass a JSON object to set the video orientation for this mode with one of the following three valid values: `0`: Indicates the video is played vertically in normal upright position. `90`: Indicates the video is rotated in the anticlockwise direction by 90 degrees. `-90`: Indicates the video is rotated in the clockwise direction by 90 degrees. If this parameter is not specified, the direction is automatically determined by the aspect ratio of the video. The request code sample can be as follows: `{direction: -90,}`.
exitFullScreen	Quits the fullscreen mode.

Result codes

The status codes reflecting the player's states and error codes specified by the onStateChange function are as follows.

Status codes

The following table lists the status codes and their descriptions.

Result code	Desciption
2004	The video is being played.
2005	The video is paused.
2006	The video is stopped.
2007	The video is being loaded.

Error codes

The following table lists the error codes, their descriptions, further actions, and whether the error codes are supported by the Android or iOS system.

Error code	Description	Further action	Android	iOS
1002	Player system error.	Check the player system and if the container SDK version meets the requirements and try again. If the problem persists, please contact Mini Program Platform for technical support.	√	√
1005	The users' devices failed to connect to the network.	Ask the users to check their network connections and try again.	√
1006	The URL specified in the src parameter is invalid.	Check if the URL is correct.	√	√
1007	Player initialization error.	Initialize the player and try again. If the problem persists, please contact Mini Program Platform for technical support.	√
1008	Failed to play the video due to a network error.	Ask the users to check their network connections and try again.	√
1010	Connection timeout due to a slow network.	Ask the users to check their network connections and try again.	√
3002	Hardware decoding error.	Inform the users that the video failed to play due to a hardware decoding error. It is also recommended to provide instructions to help users to troubleshoot this problem.	√

Sample code

.axml

Refer to the following sample to learn about how to use AXML to call the API.

copy
<live-player style="width:100%"
  id="liveplayer"
  src="{{src}}"
  autoplay="{{true}}"
  class="live"
  orientation="{{}}"
  onStateChange="onStateChange"
  onFullscreenChange="onFullscreenChange"
  />

.js

Refer to the following sample to learn about how to use JavaScript to call the API.

copy
Page({
    data: {
        url: "xxxxxxxxx",
        state: "0",
        direction: 90,
        error: "0",
        isMute: false,
        direction: 90,
    },

    onLoad() {
        this.liveplayerContext = my.createLivePlayerContext('liveplayer');
    },

    play() {
        this.liveplayerContext.play();
    },

    pause() {
        this.liveplayerContext.pause();
    },

    resume() {
        this.liveplayerContext.resume();
    },

    stop() {
        this.liveplayerContext.stop();
    },

    mute() {
        console.log("mute");
        this.data.isMute = !this.data.isMute;
        
        this.liveplayerContext.mute({
            ison: this.data.isMute,
        });
        console.log("mute finished, val=" + this.data.isMute);
    },
  onStateChange(e) {
        console.log("onStateChange, e=" + JSON.stringify(e));
        this.setData({
            state: e.detail.code,
        });

    const item = {
      name: "onStateChange",
      message: JSON.stringify(e, null, 2)
    };
    let events = this.data.events;
    events.push(item)
    this.setData({
      'events': events
    });
    },

    onFullscreenChange(e) {
        console.log("arguments.length=" + arguments.length);
        console.log("onFullscreenChange, e=" + JSON.stringify(e));
        this.setData({
            direction: e.detail.direction + "-" + e.detail.fullScreen,
        });

    const item = {
      name: "onFullscreenChange",
      message: JSON.stringify(e, null, 2)
    };
    let events = this.data.events;
    events.push(item)
    this.setData({
      'events': events
    });
    },
  });