<mpegts-video>
A custom element
for mpegts.js with an API that aims to match the
<video>
API.
Example
<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>
Install
First install the NPM package:
pmpm add mpegts-video-element
yarn add mpegts-video-element
npm install mpegts-video-element
Import 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.
Deferred mode
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');
video.mpegtsConfig = {
lazyLoadMaxDuration: 3 * 60,
enableWorker: true,
reuseRedirectedURL: true,
};
video.mpegtsLoggingConfig = {
forceGlobalTag: true,
globalTag: 'mpegts-video-element',
enableVerbose: true,
};
video.load();
});
</script>
Related