Package Exports

@netless/combine-player

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@netless/combine-player) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@netless/combine-player

Synchronize video and whiteboard playback projects

中文文档

Usages

import CombinePlayerFactory from "@netless/combine-player";

whiteWebSdk.replayRoom({ room, roomToken })
    .then(async (player) => {
        const combinePlayerFactory = new CombinePlayerFactory(player, {
            url: "video url",
            videoDOM: videoEle.current as HTMLVideoElement,
        });
        
        const combinePlayer = combinePlayerFactory.create();
        
        combinePlayer.setOnStatusChange((status, message) => {
            console.log("status change:", status, message);
        });


        await combinePlayer.play();
        await combinePlayer.seek(1000 * 60);
        await combinePlayer.pause();
    });

API

CombinePlayerFactory

new CombinePlayerFactory(whiteboard, videoOptions, debug);

whiteboard

Generated by the replayRoom function

type: Player

videoOptions

Video configuration items

type: VideoOptions

Type Details:

videoOptions: {
    url: string; // video url address
    videoDOM?: HTMLVideoElement // Which video tag to mount to(If you do not pass in, it will automatically create one)
    videoJsOptions?: import("video.js").VideoJsPlayerOptions // video.js options(see: https://docs.videojs.com/tutorial-options.html)
}

videoJsOptions defaults is:

{
    preload: "auto"
}

debug

Whether to enable debug log

type: boolean

default is: false

Example:

whiteWebSdk.replayRoom({ room, roomToken })
    .then(player => {
        const combinePlayerFactory = new CombinePlayerFactory(player, {
            url: "video url",
            videoDOM: videoEle.current as HTMLVideoElement,
        });
    });

combinePlayerFactory.create

Create an instance of the CombinePlayer and return

const combinePlayer: CombinePlayer = combinePlayerFactory.create();

return type: CombinePlayer

combinePlayerFactory.getVideoDOM

Get the video element

This method can come in handy when the CombinePlayerFactory method is used and no videoDOM is passed in

const videoDOM: HTMLVideoElement = combinePlayerFactory.getVideoDOM();

return type: HTMLVideoElement

combinePlayer.setOnStatusChange

combinePlayer.setOnStatusChange(statusOnChange);

cb

type: StatusChangeHandle

Example:

const statusOnChange = (status: PublicCombinedStatus, message: string): void => {
   console.log("status change:", status, message);
}
combinePlayer.setOnStatusChange(statusOnChange);

combinePlayer.removeStatusChange

Remove the specified status notification callback

combinePlayer.removeStatusChange(statusOnChange);

cb

type: StatusChangeHandle

Example:

const statusOnChange = (status: PublicCombinedStatus, message: string): void => {
   console.log("status change:", status, message);
}
combinePlayer.setOnStatusChange(statusOnChange);

combinePlayer.removeStatusChange(statusOnChange);

combinePlayer.removeAllStatusChange

Remove all status notification callbacks

combinePlayer.removeAllStatusChange();

combinePlayer.getStatus

Actively obtain the current status

combinePlayer.getStatus()

return type: PublicCombinedStatus

combinePlayer.playbackSpeed

set playback speed

combinePlayer.playbackSpeed(rate)

return type: void

Example:

combinePlayer.playbackSpeed(2); // Turn on double speed

combinePlayer.play

Start synchronized playback

return type: Promise<void>

Example:

combinePlayer.play();
// or
await combinePlayer.play();

combinePlayer.pause

Pause video and whiteboard

return type: Promise<void>

Example:

combinePlayer.pause();
// or
await combinePlayer.pasue();

combinePlayer.seek

combinePlayer.seek(ms)

Synchronously jump to the specified millisecond timestamp

return type: Promise<void>

Example:

combinePlayer.seek(1000);
// or
await combinePlayer.seek(1000);