Player

The player allows you to efficiently play a single video or a playlist of videos with minimal loading time.

Parameters

The player receives the following parameters:

const player = new Player(container, {
  // Video object to play
  video: Video,
  // Video playlist to play
  playlist: Playlist,
  // Playlist index to play from
  playlistIndex: 0,
  // Video id to load and play
  videoId: '',
  // Preferred video quality that should be used for playback
  playbackQuality: VideoQuality.HIGH,
  // Loop video playback
  loop: false,
  // Show player controls
  showControls: true,
  // Auto hide controls after specified milliseconds of inactivity.
  // If 0 than controls are always visible.
  hideControlsTimeout: 2000,
  // Auto play video
  autoPlay: false,
  // Auto play video when the player is in the middle of the screen. Could be useful when
  // the player is in scroll container and you need to play it only when it's visible.
  playOnFocus: false,
  // Define size of player. By default, player inherits width of container element and 
  // height will be calculated in accordance with video ratio. 
  // To customize player sizes there are 3 options:
  // - 'parent', in this case width and height will be inherited from parent container element
  // - object with width and height parameters (values should be in pixels)
  // - function that returns object with width and height. Function will be called with
  //   current video object as the first argument
  size: 'parent',
  // Playback rate
  rate: 1,
  // Player volume
  volume: 0.5,
  // Defines how the video will occupy it's place
  aspectMode: AspectMode.RESIZE_ASPECT_FILL
})

Methods

The main methods of the player component:

// Set new video
player.setVideo(video)

// Set new playlist
player.setPlaylist(playlist, 0)

// Set playlist index to play
player.setPlaylistIndex(5)

// Go to the next video from playlist
player.goToNextVideo()

// Go to the previous video from playlist
player.goToPreviousVideo()

// Start video preloading
player.load()

// Play video
player.play()

// Pause video
player.pause()

// Unload current video
player.unload()

// Update player size. Could be useful when player container size was changed without browser resize.
player.updateSize()

// Destor player instance and remove element from DOM
player.destroy()

Events

The player provides following events:

// Playback was started
player.subscribe('play', (event) => {})
// Video is playing
player.subscribe('playing', (event) => {})
// Playback was paused
player.subscribe('pause', (event) => {})
// Playback reached the end of video
player.subscribe('ended', (event) => {})
// Player entered fullscreen
player.subscribe('enterfullscreen', (event) => {})
// Player exited fullscreen
player.subscribe('exitfullscreen', (event) => {})
// Video was loaded
player.subscribe('loaded', (event) => {})
// Video loading progress was changed
player.subscribe('progress', (event, progress) => {})
// Current time was updated
player.subscribe('timeupdate', (event, currentTime) => {})
// Playback error occurred
player.subscribe('error', (event, error) => {})
// Volume was updated
player.subscribe('volumeupdate', (event, volume) => {})