This repository has been archived by the owner on May 17, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
3 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,3 @@ | ||
| # `<hls-video>` | ||
|
|
||
| [](https://www.npmjs.com/package/hls-video-element) | ||
| [](https://www.npmjs.com/package/hls-video-element) | ||
| [](https://www.jsdelivr.com/package/npm/hls-video-element) | ||
| [](https://bundlephobia.com/result?p=hls-video-element) | ||
|
|
||
| A [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) | ||
| for [hls.js](https://github.com/video-dev/hls.js) with an API that matches the | ||
| [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) API. | ||
|
|
||
| - 🏄♂️ Compatible [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) API | ||
| - 🕺 Seamlessly integrates with [Media Chrome](https://github.com/muxinc/media-chrome) | ||
|
|
||
| ## Example | ||
|
|
||
| <!-- prettier-ignore --> | ||
| ```html | ||
| <script type="module" src="https://cdn.jsdelivr.net/npm/hls-video-element@1.1/+esm"></script> | ||
| <hls-video controls src="https://stream.mux.com/r4rOE02cc95tbe3I00302nlrHfT023Q3IedFJW029w018KxZA.m3u8"></hls-video> | ||
| ``` | ||
|
|
||
| ## Install | ||
|
|
||
| First install the NPM package: | ||
|
|
||
| ```bash | ||
| npm install hls-video-element | ||
| ``` | ||
|
|
||
| Import in your app javascript (e.g. src/App.js): | ||
|
|
||
| ```js | ||
| import 'hls-video-element'; | ||
| ``` | ||
|
|
||
| Optionally, you can load the script directly from a CDN using [jsDelivr](https://www.jsdelivr.com/): | ||
|
|
||
| <!-- prettier-ignore --> | ||
| ```html | ||
| <script type="module" src="https://cdn.jsdelivr.net/npm/hls-video-element@1.1/+esm"></script> | ||
| ``` | ||
|
|
||
| This will register the custom elements with the browser so they can be used as HTML. | ||
|
|
||
| ## Related | ||
|
|
||
| - [Media Chrome](https://github.com/muxinc/media-chrome) Your media player's dancing suit. 🕺 | ||
| - [`<youtube-video>`](https://github.com/muxinc/youtube-video-element) A custom element for the YouTube player. | ||
| - [`<vimeo-video>`](https://github.com/luwes/vimeo-video-element) A custom element for the Vimeo player. | ||
| - [`<videojs-video>`](https://github.com/luwes/videojs-video-element) A custom element for Video.js. | ||
| - [`<wistia-video>`](https://github.com/luwes/wistia-video-element) A custom element for the Wistia player. | ||
| - [`<jwplayer-video>`](https://github.com/luwes/jwplayer-video-element) A custom element for the JW player. | ||
| - [`castable-video`](https://github.com/muxinc/castable-video) Cast your video element to the big screen with ease! | ||
| - [`<mux-player>`](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player custom element. | ||
| - [`<mux-video>`](https://github.com/muxinc/elements/tree/main/packages/mux-video) A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin. | ||
| > [!IMPORTANT] | ||
| > This repository moved to [muxinc/media-elements/tree/main/packages/hls-video-element](https://github.com/muxinc/media-elements/tree/main/packages/hls-video-element) | ||
| > Open issues at [muxinc/media-elements/issues](https://github.com/muxinc/media-elements/issues) |