Public methods

updateTheme()

player.updateTheme({
  progressColor: "#AEAD22"
})

You can check info about theming here

Method for setting theme for player instance

getElement()

Getter for DOM element with player UI (use it only for debug, if you need attach player to your document use attachToElement method)

attachToElement()

document.addEventListener('DOMContentLoaded', function() {
  const config = { src: 'http://my-url/video.mp4' }
  const player = Playable.create(config);

  player.attachToElement(document.getElementById('content'));
});

Method for attaching player node to your container

setWidth()

player.setWidth(400);

Method for setting width of player

getWidth()

player.getWidth(); // 400

Return current width of player in pixels

setHeight()

player.setHeight(225);

Method for setting width of player

getHeight()

player.getHeight(); // 225

Return current height of player in pixels

setFillAllSpace()

player.setFillAllSpace(true);

Method for allowing player fill all available space

setRtl()

player.setRtl(boolean);

Method for allowing player rtl direction

hide()

player.hide();

Hide whole ui

show()

player.show();

Show whole ui

on()

const Playable = require('playable');
const player = Playable.create();

player.on(Playable.UI_EVENTS.PLAY_CLICK, () => {
  // Will be executed after you will click on play button
});

// To supply a context value for `this` when the callback is invoked,
// pass the optional context argument
player.on(Playable.VIDEO_EVENTS.UPLOAD_STALLED, this.handleStalledUpload, this);

Attach an event handler function for one or more events You can check all events here

once()

const Playable = require('playable');
const player = Playable.create();

player.once(Playable.UI_EVENTS.PLAY_CLICK, () => {
  // Will be executed only one time
});

The .once() method is identical to .on(), except that the handler for a given element and event type is unbound after its first invocation.

off()

const Playable = require('playable');
const player = Playable.create();

const callback = function() {
  // Code to handle some kind of event
};

// ... Now callback will be called when some one will pause the video ...
player.on(Playable.UI_EVENTS.PAUSE, callback);

// ... callback will no longer be called.
player.off(Playable.UI_EVENTS.PAUSE, callback);

// ... remove all handlers for event UI_EVENTS.PAUSE.
player.off(Playable.UI_EVENTS.PAUSE);

Remove an event handler.

setSrc()

player.setSrc([
  'https://my-url/video.mp4',
  'https://my-url/video.webm',
  'https://my-url/video.m3u8'
]);

Read more about video source

Method for setting source of video to player.

getSrc()

player.getSrc(); // ['https://my-url/video.mp4']

Return current source of video

reset()

play()

player.play();

Start playback

pause()

player.pause();

Pause playback

togglePlayback()

player.togglePlayback();

Toggle (play\pause) playback of video

resetPlayback()

player.play();
console.log(player.isPaused); // false
...
player.resetPlayback();
console.log(player.isPaused); // true;
console.log(player.getCurrentTime()); //0;

Reset video playback

isPaused

player.play();
console.log(player.isPaused);

High level state of video playback. Returns true if playback is paused. For more advance state use getPlaybackState

isEnded

player.play();
console.log(player.isEnded);

High level state of video playback. Returns true if playback is ended. Also note, that isPaused will return true if playback is ended also. For more advance state use getPlaybackState

syncWithLive()

player.syncWithLive();

Method for synchronize current playback with live point. Available only if you playing live source.

seekForward()

player.seekForward(5);

Method for going forward in playback by your value

seekBackward()

player.seekBackward(5);

Method for going backward in playback by your value

setVolume()

player.setVolume(50);

Set volume

getVolume()

player.getVolume(); // 50

Get volume

increaseVolume()

player.increaseVolume(30);

Method for increasing current volume by value

decreaseVolume()

player.decreaseVolume(30);

Method for decreasing current volume by value

mute()

player.mute();

Mute the video

unmute()

player.unmute(true);

Unmute the video

isMuted

player.mute();
player.isMuted; // true
player.unmute();
player.isMuted: // false

Get mute flag

setAutoplay()

player.setAutoplay();

Set autoplay flag

getAutoplay()

player.getAutoplay(); // true

Get autoplay flag

setLoop()

player.setLoop(true);

Set loop flag

getLoop()

player.getLoop(); // true

Get loop flag

setPlaybackRate()

Method for setting playback rate

getPlaybackRate()

Return current playback rate

setPreload()

player.setPreload('none');

Set preload type

getPreload()

player.getPreload(); // none

Return preload type

getCurrentTime()

player.getCurrentTime(); //  60.139683

Return current time of video playback

seekTo()

player.seekTo(34);

Method for seeking to time in video

getDuration()

player.getDuration(); // 180.149745

Return duration of video

getVideoRealWidth()

player.getVideoWidth(); // 400

Return real width of video from metadata

getVideoRealHeight()

player.getVideoHeight(); // 225

Return real height of video from metadata

setPlaysinline()

player.setPlaysinline(true);

Set playsinline flag

getPlaysinline()

player.getPlaysinline(); // true

Get playsinline flag

setCrossOrigin()

player.setCrossOrigin('anonymous');

Set crossorigin attribute for video

getCrossOrigin()

player.getCrossOrigin(); // 'anonymous'

Get crossorigin attribute value for video

getPlaybackState()

Return current state of playback

getDebugInfo()

player.getDebugInfo();

The above command returns JSON structured like this:

{
  "type": "HLS",
  "viewDimensions": {
    "width": 700,
    "height": 394
  }
  "url": "https://example.com/video.m3u8",
  "currentTime": 22.092514,
  "duration": 60.139683,
  "loadingStateTimestamps": {
    "metadata-loaded": 76,
    "ready-to-play": 67
  },
  "bitrates": [
    // Available bitrates
    "100000",
    "200000",
    ...
  ],
  // One of available bitrates, that used right now
  "currentBitrate": "100000",
  // Raw estimation of bandwidth, that could be used without playback stall
  "bwEstimate": "120000"
  "overallBufferLength": 60.139683,
  "nearestBufferSegInfo": {
    "start": 0,
    "end": 60.139683
  }
}

Return object with internal debug info

enableExitFullScreenOnPause()

player.play();
player.enableExitFullScreenOnPause();
player.enterFullScreen();
console.log(player.isInFullScreen) // true
player.pause();
console.log(player.isInFullScreen) // false

Allow player try to exit full screen on pause

disableExitFullScreenOnPause()

player.play();
player.disableExitFullScreenOnPause();
player.enterFullScreen();
console.log(player.isInFullScreen) // true
player.pause();
console.log(player.isInFullScreen) // true

Disallow player to exit full screen on pause

enableExitFullScreenOnEnd()

player.play();
player.enableExitFullScreenOnEnd();
player.enterFullScreen();
console.log(player.isInFullScreen) // true
console.log(player.isEnded); // true
console.log(player.isInFullScreen) // false

Allow player try to exit full screen on end

disableExitFullScreenOnEnd()

player.play();
player.disableExitFullScreenOnEnd();
player.enterFullScreen();
console.log(player.isInFullScreen) // true
console.log(player.isEnded); // true
console.log(player.isInFullScreen) // true

Disallow player try to exit full screen on end

enableEnterFullScreenOnPlay()

player.enableEnterFullScreenOnPlay();
console.log(player.isInFullScreen) // false
player.play();
console.log(player.isInFullScreen) // true

Allow player try to exit full screen on end

disableEnterFullScreenOnPlay()

player.disableEnterFullScreenOnPlay();
console.log(player.isInFullScreen) // false
player.play();
console.log(player.isInFullScreen) // false

Disallow player try to exit full screen on end

enablePauseVideoOnFullScreenExit()

player.play();
player.enablePauseVideoOnFullScreenExit();
player.enterFullScreen();
console.log(player.isInFullScreen) // true
player.pause();
console.log(player.isInFullScreen) // false

Allow player try to exit full screen on end

disablePauseVideoOnFullScreenExit()

player.play();
player.enablePauseVideoOnFullScreenExit();
player.enterFullScreen();
console.log(player.isInFullScreen) // true
player.pause();
console.log(player.isInFullScreen) // true

Disallow player try to exit full screen on end

enterFullScreen()

player.enterFullScreen();

Player would try to enter fullscreen mode. Behavior of fullscreen mode on different platforms may differ.

exitFullScreen()

player.exitFullScreen();

Player would try to exit fullscreen mode.

isInFullScreen

console.log(player.isInFullScreen); // false

Return true if player is in full screen

setVideoViewMode()

player.setVideoViewMode("BLUR");

Method for setting video view mode.

hideOverlay()

player.showOverlay();

Method for completely hiding player overlay. It's not gonna appear on initial state of player and when video is ended.

showOverlay()

player.showOverlay();

Method for showing player overlay after it was completely hidden with player.hideOverlay().

setPoster()

player.setPoster('https://example.com/poster.png');

Method for setting overlay poster

turnOnOverlayTransparency()

player.turnOnOverlayTransparency();

After initialisation player has by default an overlay that is black;

The .turnOnOverlayTransparency() method makes this overlay transparent.

turnOffOverlayTransparency()

player.turnOffOverlayTransparency();

The .turnOffOverlayTransparency() method returns player's overlay to default settings. It becomes black again.

setMainUIShouldAlwaysShow()

player.setMainUIShouldAlwaysShow(true);

Method for allowing main ui to be always shown despite the playback state and the cursor position

showTitle()

hideTitle()

showLiveIndicator()

hideLiveIndicator()

setTitle()

player.setTitle('Your awesome video title here');

Live Demo

Display title text over the video. If you want to have clickable title, use setTitleClickCallback

setTitleClickCallback()

const callback = () => {
  console.log('Click on title);
}
player.setTitleClickCallback(callback);

Method for attaching callback for click on title

setAlwaysShowLogo()

player.setAlwaysShowLogo(true);

Method for allowing logo to be always shown in bottom block

hideLogo()

player.hideLogo();

Method for hiding logo. If you use setAlwaysShowLogo or setControlsShouldAlwaysShow, logo would automaticaly appear.

showLogo()

player.showLogo();

Method for showing logo.

showPlayControl()

player.showPlayControl();

Method for showing play control.

showVolumeControl()

player.showVolumeControl();

Method for showing volume control.

showTimeControl()

player.showTimeControl();

Method for showing time control.

showFullScreenControl()

player.showFullScreenControl();

Method for showing full screen control.

showPictureInPictureControl()

player.showPictureInPictureControl();

Method for showing picture-in-picture control.

showProgressControl()

player.showProgressControl();

Method for showing progress control.

showDownloadButton()

player.showDownloadButton();

Method for showing download button.

hidePlayControl()

player.hidePlayControl();

Method for hiding play control.

hideVolumeControl()

player.hideVolumeControl();

Method for hiding voluem control.

hideTimeControl()

player.hideTimeControl();

Method for hiding time control.

hideFullScreenControl()

player.hideFullScreenControl();

Method for hiding full screen control.

hidePictureInPictureControl()

player.hidePictureInPictureControl();

Method for hiding picture-in-picture control.

hideProgressControl()

player.hideProgressControl();

Method for hiding progress control.

hideDownloadButton()

player.hideDownloadButton();

Method for hiding download button.

showPreviewOnProgressDrag()

player.showPreviewOnProgressDrag();

Player will show full screen preview instead of actual seek on video when user drag the progress control

seekOnProgressDrag()

player.seekOnProgressDrag();

Player will seek on video when user drag the progress control

addTimeIndicator()

Add time indicator to progress bar

addTimeIndicators()

Add time indicators to progress bar

clearTimeIndicators()

Delete all time indicators from progress bar

setLogo()

player.setLogo('https://example.com/logo.png');

Method for setting source of image, that would be used as logo

setLogoClickCallback()

const callback = () => {
  console.log('Click on title);
}
player.setLogoClickCallback(callback);

Method for attaching callback for click on logo

setDownloadClickCallback()

player.setDownloadClickCallback(() => console.log('handle download logic'));

If download button presented, set callback on click

enterPictureInPicture()

player.enterFullScreen();

Player would try to enter fullscreen mode. Behavior of fullscreen mode on different platforms may differ.

exitPictureInPicture()

player.exitFullScreen();

Player would try to exit fullscreen mode.

disablePictureInPicture()

player.disablePictureInPicture();

Disable functionality for entering picture in picture mode

enablePictureInPicture()

player.enablePictureInPicture();

Enable functionality for entering picture in picture mode

isInPictureInPicture

console.log(player.isInPictureInPicture); // false

Return true if player is in picture in picture mode

setFramesMap()