mpegts-video-element

<mpegts-video>

A custom element for mpegts.js with an API that aims to match the <video> API.

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

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.

Related

• 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-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.