NusaPlayer

Configuration

Passed as the second argument to Player.make(container, options).

import Player from '@nusaplayer/core'
 
Player.make('#player', {
  source: {
    src: 'https://vjs.zencdn.net/v/oceans.mp4',
    poster: 'https://vjs.zencdn.net/v/oceans.png',
    title: "Disney's Oceans"
  },
  volume: 0.8,
  lang: 'en'
}).create()

container

CSS selector or element. The player fills this node.

type container = HTMLElement | string

options

interface PlayerOptions {
  source?: {
    src: string
    poster?: string
    title?: string
    format?: 'auto' | 'hls' | 'm3u8' | 'dash' | 'mpd' | 'flv' | 'm2ts' | 'mpegts' | string
    type?: string // MIME, optional
  } | Array<{
    src: string
    poster?: string
    title?: string
    format?: string
    type?: string
  }>
  autoplay?: boolean
  autopause?: boolean // pause other NusaPlayer instances when this one plays
  muted?: boolean
  loop?: boolean
  volume?: number // 0โ€“1
  playbackRate?: number
  playsinline?: boolean
  preload?: 'auto' | 'metadata' | 'none'
  lang?: 'auto' | 'zh' | 'zh-CN' | 'en' | 'id' | 'fa' | 'pa'
  languages?: Partial<Record<Lang, Record<string, string>>>
  isLive?: boolean
  videoAttr?: Record<string, boolean | string>
  isNativeUI?: () => boolean
}
OptionDefaultNotes
source.format'auto'Loaders match on extension (m3u8, mpd, flv) or this field
source arrayโ€”Tried in order. If one URL fails, the next is loaded (videosourcefallback)
autoplayfalseBrowsers often require muted: true
autopausetruePause other NusaPlayer instances when this one plays
playsinlinetrueNeeded on iOS so playback stays in-page
lang'auto'Follows navigator.language
isLivefalseHides progress / seek when true
isNativeUIโ€”Return true to skip custom UI (Safari native controls)

Language

Built-in UI strings: en, id, zh / zh-CN, fa, pa.

Player.make('#player', {
  lang: 'id',
  languages: {
    id: { Play: 'Putar', Pause: 'Jeda' }
  },
  source: { src: 'https://vjs.zencdn.net/v/oceans.mp4' }
})

lang: 'auto' picks the first navigator language NusaPlayer knows, then falls back to English.

Fallback sources

Pass an array. The first working URL is used; a later item is only loaded if the current one errors.

Player.make('#player', {
  source: [
    { src: 'https://cdn.example/video.m3u8', format: 'hls', title: 'HLS' },
    { src: 'https://vjs.zencdn.net/v/oceans.mp4', title: 'MP4 fallback' }
  ]
})

player.changeSource accepts the same array shape. Listen for videosourcefallback if you need to know which URL became active.

Remember volume and speed

player.on('ratechange', () => {
  if (!player.isSourceChanging) {
    localStorage.setItem('np-speed', String(player.playbackRate))
  }
})
 
player.on('volumechange', () => {
  localStorage.setItem('np-volume', String(player.volume))
})
 
player.on('timeupdate', () => {
  localStorage.setItem(player.options.source.src, String(player.currentTime))
})
 
player.on('loadedmetadata', () => {
  const prev = localStorage.getItem(player.options.source.src)
  if (prev) player.seek(Number(prev) - 3)
})

Apply saved values when you call make:

Player.make('#player', {
  volume: Number(localStorage.getItem('np-volume') || 1),
  playbackRate: Number(localStorage.getItem('np-speed') || 1),
  source: { src: 'https://vjs.zencdn.net/v/oceans.mp4' }
})