luwes / dash-video-element

Custom element for playing video using the DASH format. Uses dash.js.

<dash-video>

A custom element for dash.js with an API that matches the <video> API.

• 🏄‍♂️ Compatible HTMLMediaElement API
• 🕺 Seamlessly integrates with Media Chrome

Example

<script type="module" src="https://cdn.jsdelivr.net/npm/@luwes/dash-video-element@1.0/+esm"></script>
<dash-video controls src="https://player.vimeo.com/external/648359100.mpd?s=a4419a2e2113cc24a87aef2f93ef69a8e4c8fb0c"></dash-video>

Install

First install the NPM package:

npm install @luwes/dash-video-element

Import in your app javascript (e.g. src/App.js):

import '@luwes/dash-video-element';

Optionally, you can load the script directly from a CDN using JSDelivr:

<script type="module" src="https://cdn.jsdelivr.net/npm/@luwes/dash-video-element@1.0/+esm"></script>

This will register the custom elements with the browser so they can be used as HTML.

Related

• Media Chrome Your media player's dancing suit. 🕺
• <youtube-video> A custom element for the YouTube player.
• <vimeo-video> A custom element for the Vimeo player.
• <videojs-video> A custom element for Video.js.
• <wistia-video> A custom element for the Wistia player.
• <jwplayer-video> A custom element for the JW player.
• castable-video Cast your video element to the big screen with ease!
• <mux-player> The official Mux-flavored video player custom element.
• <mux-video> A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.