@oplayer/dash

oplayer-plugin-dash

npm (opens in a new tab) npm bundle size npm dm (opens in a new tab) jsdelivr (opens in a new tab)

MPEG DASH (opens in a new tab) plugin for oplayer

Install

npm i @oplayer/core @oplayer/dash dashjs
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<!--  dash FIRST  -->
<script src="http://cdn.dashjs.org/latest/dash.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/dash@latest/dist/index.min.js"></script>
 
<div id="oplayer" />
 
<script>
  OPlayer.make('#oplayer', {
    source: {
      src: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
      poster: 'https://oplayer.vercel.app/poster.png'
    }
  })
    .use([ODash()])
    .create()
</script>

Usage

export type Matcher = (video: HTMLVideoElement, source: Source) => boolean
 
// active inactive
export type Active = (
  instance: MediaPlayerClass,
  library: typeof import('dashjs')
) => void | ((instance: MediaPlayerClass, library: typeof import('dashjs')) => void)
 
export interface DashPluginOptions {
  matcher?: Matcher
  active?: Active
  /**
   * config for dashjs
   *
   * @type {MediaPlayerSettingClass}
   */
  config?: MediaPlayerSettingClass
  /**
   * enable quality control for the stream, does not apply to the native (iPhone) clients.
   * @default: true
   */
  qualityControl?: boolean
  /**
   *  control how the stream quality is switched. default: immediate
   *  @value immediate: Trigger an immediate quality level switch to new quality level. This will abort the current fragment request if any, flush the whole buffer, and fetch fragment matching with current position and requested quality level.
   *  @value smooth: Trigger a quality level switch for next fragment. This could eventually flush already buffered next fragment.
   */
  qualitySwitch?: 'immediate' | 'smooth'
  /**
   * @default: false
   */
  withBitrate?: boolean
  /**
   * @default: true
   */
  audioControl?: boolean
  /**
   * @default: true
   */
  textControl?: boolean
}