Player Configuration

💡

@oplayer/core does not provide any ui related functions such as thumbnail, subtitles, etc. If you need these functions please install [@oplayer/ui](./ui)

OPlayer.make(/* container */ '#app', {
  /** Configuration **/
  /** Here's where to fill in the configuration **/
  muted: true
  // and more ...
}).create()

container

The DOM container attached to the player.

// DOM or CSS selector
type container = HTMLElement | string

options

export interface PlayerOptions {
  source?: {
    src: string
    poster?: string
    title?: string // for screenshot, controll bar
    format?:
      | 'auto'
      /** hls.js */
      | 'hls'
      | 'm3u8'
      /** dash.js */
      | 'dash'
      | 'mpd'
      /** mpegts.js */
      | 'flv'
      | 'm2ts'
      | 'mpegts'
      /** other */
      | string
  }
  autoplay?: boolean //https://developer.chrome.com/blog/autoplay/
  autopause?: boolean //Only allow one player playing at once.
  muted?: boolean
  loop?: boolean
  volume?: number
  playbackRate?: number
  playsinline?: boolean
  preload?: 'auto' | 'metadata' | 'none'
  lang?: Lang
  isLive?: boolean
  videoAttr?: Record<string, boolean | string>
  isNativeUI?: () => boolean
}

persisted state

player.on('ratechange', () => {
  if (!player.isSourceChanging)
    localStorage.setItem('@oplayer/UserPreferences/speed', player.playbackRate.toString())
})
 
player.on('volumechange', () => {
  localStorage.setItem('@oplayer/UserPreferences/volume', player.volume.toString())
})
 
player.on('timeupdate', () => {
  localStorage.setItem(player.options.source.src, player.currentTime.toString())
})
 
player.on('loadedmetadata', () => {
  var prevTime = localStorage.getItem(e.payload.src)
  if (prevTime) {
    player.seek(prevTime - 3)
  }
})

Install @oplayer/ui