The element API matches the HTML5 <video> tag, so it can be easily swapped with other media, and be compatible with other UI components that work with the video tag.

Example

<html>
<head>
  <script type="module" src="https://unpkg.com/hls-video-element@0.0"></script>
</head>
<body>

  <hls-video controls src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe.m3u8"></hls-video>

</body>
</html>

Installing

<hls-video> is packaged as a javascript module (es6) only, which is supported by all evergreen browsers and Node v12+.

Loading into your HTML using `<script>`

Note the type="module", that's important.

Modules are always loaded asynchronously by the browser, so it's ok to load them in the head :thumbsup:, and best for registering web components quickly.

<head>
  <script type="module" src="https://unpkg.com/hls-video-element@0.0"></script>
</head>

Adding to your app via `npm`

npm install hls-video-element --save

Or yarn

yarn add hls-video-element

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

import 'hls-video-element';

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

Keywords

FAQs

What is hls-video-element?

Is hls-video-element popular?

Is hls-video-element well maintained?

Package last updated on 19 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

hls-video-element

Example

Installing

Loading into your HTML using <script>

Adding to your app via npm

Keywords

Related posts

Weekly Downloads Now Available in npm Package Search Results

Tech's $90B Ghost Engineer Problem: Stanford Study Finds 9.5% of Engineers Do Almost Nothing

Loading into your HTML using `<script>`

Adding to your app via `npm`