Skip to main content

VideoPlayer

Wrappers Video.js's player instance with DIGIDECK-specific logic.

Constructor

Must pass in the player instance you want to wrapper. This is done by default in the VideojsService. The methods in this class will interact with this.player.

constructor(player) {
    var self = this;
    this.player = player;
}

Methods​

disposePlayer​

Description​

  • Destroys the video.js player instance (removes the html associated with a videojs player from the document).

Code Example​

this.player = await digideckCore.videoJsService.initVideoJsPlayer(this.videoEl, this.source, {
    config: {
        controls: controls,
        muted: !this.audio,
        poster: this.posterImage,
        loop: this.loop,
        autoplay: false,
        fill: this.stretching == 'fill' ? true : false
    },
    onPlayerReady: () => {}
});

this.player.dispose();

setPlayerControls​

Description​

  • Sets the controls for the video.js player instance.

Options:​

  • enabled: Boolean Will enable the controls for the player if true, disables the controls is false.

Code Example​

this.player = await digideckCore.videoJsService.initVideoJsPlayer(this.videoEl, this.source, {
    config: {
        controls: controls,
        muted: !this.audio,
        poster: this.posterImage,
        loop: this.loop,
        autoplay: false,
        fill: this.stretching == 'fill' ? true : false
    },
    onPlayerReady: () => {}
});

// remove player's controls
this.player.setPlayerControls(false);

setPlayerLoop​

Description​

  • Sets looping for the video.js player instance.

Options:​

  • enabled: Boolean Will loop the video if true, will not loop if false.

Code Example​

this.player = await digideckCore.videoJsService.initVideoJsPlayer(this.videoEl, this.source, {
    config: {
        controls: controls,
        muted: !this.audio,
        poster: this.posterImage,
        loop: this.loop,
        autoplay: false,
        fill: this.stretching == 'fill' ? true : false
    },
    onPlayerReady: () => {}
});

// start looping the player instance's video
this.player.setPlayerLoop(false);

setPlayerMuted​

Description​

  • Sets whether the video.js video should be muted or not.

Options:​

  • enabled: Boolean Will mute the video if true, will unmute if false.

Code Example​

this.player = await digideckCore.videoJsService.initVideoJsPlayer(this.videoEl, this.source, {
    config: {
        controls: controls,
        muted: !this.audio,
        poster: this.posterImage,
        loop: this.loop,
        autoplay: false,
        fill: this.stretching == 'fill' ? true : false
    },
    onPlayerReady: () => {}
});

// mute the video
this.player.setPlayerMuted(true);

startPlayback​

Description​

  • Starts playing the video.js video.

Code Example​

this.player = await digideckCore.videoJsService.initVideoJsPlayer(this.videoEl, this.source, {
    config: {
        controls: controls,
        muted: !this.audio,
        poster: this.posterImage,
        loop: this.loop,
        autoplay: false,
        fill: this.stretching == 'fill' ? true : false
    },
    onPlayerReady: () => {}
});

// start playing right away, even though autoplay is false
this.player.startPlayback();

stopPlayback​

Description​

  • Starts playing the video.js video. The difference between this and pausePlayback is that stopPlayback will set the video time to 0 (restart) and toggle the hasStarted value on the player to show the poster again.

Code Example​

this.player = await digideckCore.videoJsService.initVideoJsPlayer(
    this.videoEl,
    this.source,
    {
    config: {
        controls: controls,
        muted: !this.audio,
        poster: this.posterImage,
        loop: this.loop,
        autoplay: false,
        fill: this.stretching == 'fill' ? true : false
    },
    onPlayerReady: () => {}
}
);


onEditModeActive() {
    // stop the player when edit mode is activated
    this.player.stopPlayback();
}

pausePlayback​

Description​

  • Starts playing the video.js video. The difference between this and stopPlayback is that stopPlayback will set the video time to 0 (restart) and toggle the hasStarted value on the player to show the poster again.

Code Example​

this.player = await digideckCore.videoJsService.initVideoJsPlayer(
    this.videoEl,
    this.source,
    {
    config: {
        controls: controls,
        muted: !this.audio,
        poster: this.posterImage,
        loop: this.loop,
        autoplay: false,
        fill: this.stretching == 'fill' ? true : false
    },
    onPlayerReady: () => {}
}
);


onEditModeActive() {
    // pause the player when edit mode is activated
    this.player.pausePlayback();
}