Skip to content

ektotv/mpegts-video-element

Repository files navigation

<mpegts-video>

Version

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:

# with pnpm
pmpm add mpegts-video-element

# with yarn
yarn add mpegts-video-element

# with npm
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');

    // 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>

Related