Kappapps SDK

Appearance

Class: KVideo ​

Overlay video player: creates an HTML container positioned on screen, injects a <video> element into it, and manages its volume, positioning and playback according to the timeline.

Remarks ​

You rarely instantiate KVideo directly: go through k.medias.playVideo(source, volume, position) or through KMedia for a library media of type videos. All methods are chainable. Audio uses this app's Web Audio context. URL-based videos retry once in native mode if their initial CORS-enabled load fails (for example on a host without CORS). That compatibility fallback is not protected from Chromium's native mixer issue. Channel/library videos require CORS and never use that fallback.

Example ​

ts
// Play a video at 70% volume in a quarter of the screen
await k.medias.playVideo('https://example.tld/clip.mp4', 70, {
    x: 0, y: 0, w: 960, h: 540,
});

See ​

KMedia for the generic media, KAudio and KImage.

Implements ​

Properties ​

container ​

ts
container: HTMLDivElement = null;

<div> container injected into the DOM that hosts the video, or null before loading.

loaded ​

ts
loaded: boolean = false;

true once the video is ready to play (canplay).

position ​

ts
position: MediaPosition;

Current position and size in logical iframe pixels (fullscreen by default).

source ​

ts
source: string;

timeline ​

ts
timeline: MediaTimeline = {};

video ​

ts
video: HTMLVideoElement = null;

Played <video> element, or null before loading.

volume ​

ts
volume: number = 50;

Methods ​

play() ​

ts
play(): Promise<KVideo>;

Preloads if needed, displays, then plays the video. Honors the timeline: starts at timeline.startAt and stops at timeline.endAt (in milliseconds) when set.

Returns ​

Promise<KVideo>

A promise resolved with this KVideo once playback has started.

Throws ​

Rejects (and emits the error event) if loading or playback fails.

See ​

playSync to wait for the video to finish.

Implementation of ​

KMedia.play

playSync() ​

ts
playSync(): Promise<KVideo>;

Plays the video and waits for it to finish (natural end or via the timeline) before resolving.

Returns ​

Promise<KVideo>

A promise resolved with this KVideo once the video has finished.

Throws ​

Rejects if a loading / playback error occurs.

See ​

play to not wait for the end.

Implementation of ​

KMedia.playSync

preload() ​

ts
preload(): Promise<KVideo>;

Loads the video (creates the container and the <video> element, and waits for canplay) without playing it.

Returns ​

Promise<KVideo>

A promise resolved with this KVideo (chainable).

See ​

play to preload then play.

Implementation of ​

KMedia.preload

remove() ​

ts
remove(): KVideo;

Stops the video, then permanently removes its container from the DOM.

Returns ​

KVideo

This KVideo (chainable).

Implementation of ​

KMedia.remove

setPosition() ​

ts
setPosition(position): KVideo;

Repositions and resizes the video on screen.

Parameters ​

position ​

MediaPositionCreate

New position / size — see MediaPositionCreate (omitted fields keep their current value).

Returns ​

KVideo

This KVideo (chainable).

Implementation of ​

KMedia.setPosition

setVolume() ​

ts
setVolume(volume): KVideo;

Sets the playback volume of the video.

Parameters ​

volume ​

number

Target volume, from 0 to 100.

Returns ​

KVideo

This KVideo (chainable).

Implementation of ​

KMedia.setVolume

stop() ​

ts
stop(): KVideo;

Pauses the video, hides its container and emits the end event. No effect if the video is already stopped.

Returns ​

KVideo

This KVideo (chainable).

See ​

remove to stop and remove from the DOM.

Implementation of ​

KMedia.stop