Configuration

const config = {
  src: [
    'http://my-url/video.mp4',
    'http://my-url/video.webm',
    'http://my-url/video.m3u8'
  ],
  poster: 'http://my-poster.jpg',
  title: 'Awesome video',

  width: 160,
  height: 90,
  fillAllSpace: false,
  rtl: false,

  videoElement: document.queryElement('video'),

  preload: 'auto',
  autoplay: false,
  loop: true,
  muted: false,
  volume: 50,
  playsinline: true,
  crossOrigin: 'anonymous',
  nativeBrowserControls: false,

  disableControlWithClickOnPlayer: false,
  disableControlWithKeyboard: false,

  hideMainUI: false,
  hideOverlay: false,

  disableFullScreen: false,

  texts: {
    TEXT_KEY: 'TEXT_VALUE',
  }
};

const theme = {
  progressColor: "#aaa"
};

const player = Playable.create(config, theme);

Video source config

config.src: PlayableMediaSource A string or array with source of the video. For more information see this page
config.videoElement: HTMLVideoElement Video Element that will be respected by playable. Can be used for example to share the same video element cross players, or setting custom video source (WebRTC for example).

UI related config

config.width: Number Width of video player
config.height: Number Height of video player
config.fillAllSpace: Boolean Pass true to allow player fill all space of it container
config.rtl: Boolean Pass true to allow player rtl direction. The property only configures playable behaviour, not modules inside
config.title: String String that would be shown as title of video
config.poster: String URL to image that would be used as poster on overlay
config.texts: ITextMapConfig Gives you ability to override texts, that are used in player. Read more here.

config.hideMainUI: Boolean Pass true to completly hide all our UI of player, except overlay
config.hideOverlay: Boolean Pass true to completly hide overlay
config.disableControlWithKeyboard: Boolean Pass false to disable ability to control player through keyboard
config.disableControlWithClickOnPlayer: Boolean Pass false to disable ability to control player through click on player(not related to controls of player)
config.disableFullScreen: Boolean Pass true to disable functionality related to full screen mode
config.nativeBrowserControls: Boolean Pass true to show native browser controls. You also should pass hideMainUI: true for better look

Playback related config

config.loop: Boolean Loop video playback
config.autoPlay: Boolean Start video playback as soon as it can do so without stopping to finish loading the data
config.preload: OneOf('auto', 'metadata', 'none') Type of preloading. For more info check (MDN)
config.muted: Boolean Status of audio playback. If set, the audio will be initially silenced
config.volume: Number<0..100> Start value of volume for audio
config.playsinline: Boolean Attribute for playing inline in iOS
config.crossOrigin: 'anonymous' | 'use-credentials' Attribute setting video crossOrigin property