Dojo NG is being built in the open, one section at a time — follow along on Heptapod.

Playground Docs Components Migrate Blog Community Source GitHub
★ GitHub ★ Heptapod Get started

API REFERENCE · MEDIA

<dj-video>

A themed video player built on video.js.

video.js (version 8, which includes HLS support) plays the video and draws its own control bar. The component handles setup, theming, and events.

Try it in the playground

@dojo-ng/video · v0.1.2

npm install @dojo-ng/video

import "@dojo-ng/video";

Before you use it

Load two things at the document level, because the component does not bundle them:

  • The video.js stylesheet, with a <link> in the page head.
  • video.js itself, resolved by your bundler or an import map.

Changing properties

  • src, sources, and poster update the playing video.
  • muted, autoplay, loop, tracks, and label recreate the player.

Events and methods

  • dj-play, dj-pause, and dj-ended follow playback. dj-time reports { current, duration } at most once per second.
  • Use these events for analytics, xAPI statements, or saving the playback position.
  • play() and pause() control playback. player() returns the video.js instance itself, for advanced use; the component does not support what you do with it.

Light DOM

  • The player renders in the light DOM, because video.js adds its own DOM and styles, and its fullscreen and track menus do not work well inside a shadow root.

Not built

  • Custom video controls. The video.js control bar is used as it is.

Need one of these? Make a request on Discord or add an issue (work item) on Heptapod.

Properties

PropertyAttributeTypeDefault
sourcesOrdered source list ({ src, type }). Takes precedence over src. Property only VideoJsSource[] None
srcConvenience single source; becomes one entry in sources. src string None
posterPoster image URL, shown before playback. poster string None
mutedStart muted. muted boolean false
autoplayStart playing (browsers require muted for autoplay). autoplay boolean false
loopLoop playback. loop boolean false
tracksText-track descriptors passed straight to video.js. Property only unknown[] None
labelAccessible name for the player. label string None

Events

dj-playdj-pausedj-endeddj-time

Methods

MethodDescription
play()Start playback.
pause()Pause playback.
player(): VideoJsPlayer | nullThe underlying video.js player instance. Advanced escape hatch; no support implied.