A custom element
for mpegts.js with an API that aims to match the
<video> API.
- 🏄♂️ Compatible
HTMLMediaElementAPI - 🕺 Seamlessly integrates with Media Chrome
<mpegts-video muted autoplay controls src="http://192.168.1.110/streaming/camera.ts"></mpegts-video>With Media Chrome
<media-controller noautoseektolive defaultstreamtype="live">
<mpegts-video slot="media" muted autoplay src="http://192.168.1.110/streaming/camera.ts"></mpegts-video>
<media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
<media-control-bar>
<media-play-button></media-play-button>
<media-mute-button></media-mute-button>
<media-volume-range></media-volume-range>
<media-time-range></media-time-range>
<span class="spacer"></span>
<media-pip-button></media-pip-button>
<media-captions-button></media-captions-button>
<media-live-button disabled></media-live-button>
<media-fullscreen-button></media-fullscreen-button>
</media-control-bar>
</media-controller>First install the NPM package:
# with pnpm
pmpm add mpegts-video-element
# with yarn
yarn add mpegts-video-element
# with npm
npm install mpegts-video-elementImport in your app javascript (e.g. src/App.js):
import 'mpegts-video-element';Optionally, you can load the script directly from a CDN using esm.run:
<script type="module" src="https://esm.run/mpegts-video-element"></script>This will register the custom elements with the browser so they can be used as HTML.
By default, the element will load and setup the mpegts.js player immediately. This behaviour can be deferred so you can control when the player is loaded by adding a defer attribute to the element.
This is useful when you want to pass a custom mpegts.js configuration to the player.
<mpegts-video muted autoplay controls src="http://192.168.1.109/stream.ts" defer></mpegts-video>
<script>
customElements.whenDefined('mpegts-video').then(() => {
const video = document.querySelector('mpegts-video');
// set a custom mpegts config
video.mpegtsConfig = {
lazyLoadMaxDuration: 3 * 60,
enableWorker: true,
reuseRedirectedURL: true,
};
//set a custom mpegts logging config
video.mpegtsLoggingConfig = {
forceGlobalTag: true,
globalTag: 'mpegts-video-element',
enableVerbose: true,
};
// then load the player
video.load();
});
</script>- Media Chrome Your media player's dancing suit. 🕺
<dash-video>Custom element for playing video using the DASH format.<youtube-video>A custom element for the YouTube player.<vimeo-video>A custom element for the Vimeo player.<jwplayer-video>A custom element for the JW player.<videojs-video>A custom element for Video.js.<wistia-video>A custom element for the Wistia player.<cloudflare-video>A custom element for the Cloudflare player.<hls-video>A custom element for playing HTTP Live Streaming (HLS) videos.castable-videoCast 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.