Control the playback, pause, and drag progress bar of video and audio on a whiteboard. The effect is as follows:
npm install @netless/white-video-plugin -save
npm install @netless/white-audio-plugin -save
or
yarn add @netless/white-video-plugin
yarn add @netless/white-audio-plugin
import {WhiteWebSdk, createPlugins} from "white-web-sdk";
// 1. Introduce the corresponding library videoPlugin
import {videoPlugin} from "@netless/white-video-plugin";
// 2. The createPlugins method can construct plugins
const plugins = createPlugins({"video": videoPlugin, "audio": audioPlugin});
// 3. The setPluginContext method can set the plugin who can control
plugins.setPluginContext("video", {identity: "host"}); // If the identity is a teacher, host is a student guest
plugins.setPluginContext("audio", {identity: "host"});
// 4. Load plugins during initialization
whiteWebSdk = new WhiteWebSdk({
appIdentifier: "{{appIdentifier}}",
plugins: plugins
});
// 5. Insert video plugin
room.insertPlugin("video", {
originX: 0, // The relative position of the inserted video originX: 0 originY: 0 is the middle
originY: 0,
width: 480, // insert the width of the video component
height: 270, // insert the height of the video component
attributes: {
pluginVideoUrl: url, // Insert the network address of the video, pay attention to the cross-domain access of resources when debugging
poster: url, // cover address
isNavigationDisable: boolean // Whether to disable the navigation bar true is disabled
},
});
// 6. Insert audio plugin (the fields are the same as above)
room.insertPlugin("audio", {
originX: 0,
originY: 0,
width: 480,
height: 86,
attributes: {
pluginAudioUrl: url,
poster: url,
isNavigationDisable: boolean
},
});