This repository has been archived by the owner on May 8, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
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
59 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,59 +1,3 @@ | ||
# `<cloudflare-video>` | ||
|
||
[![NPM Version](https://img.shields.io/npm/v/cloudflare-video-element?style=flat-square&color=informational)](https://www.npmjs.com/package/cloudflare-video-element) | ||
[![NPM Downloads](https://img.shields.io/npm/dm/cloudflare-video-element?style=flat-square&color=informational&label=npm)](https://www.npmjs.com/package/cloudflare-video-element) | ||
[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/cloudflare-video-element?style=flat-square&color=%23FF5627)](https://www.jsdelivr.com/package/npm/cloudflare-video-element) | ||
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/cloudflare-video-element?style=flat-square&color=success&label=gzip)](https://bundlephobia.com/result?p=cloudflare-video-element) | ||
|
||
A [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) | ||
for the Cloudflare player 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/cloudflare-video-element@1.0/+esm"></script> | ||
<cloudflare-video controls src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4"></cloudflare-video> | ||
``` | ||
|
||
## Installing | ||
|
||
First install the NPM package: | ||
|
||
```bash | ||
npm install cloudflare-video-element | ||
``` | ||
|
||
Import in your app javascript (e.g. src/App.js): | ||
|
||
```js | ||
import 'cloudflare-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/cloudflare-video-element@1.0/+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. | ||
- [`<spotify-audio>`](https://github.com/luwes/spotify-audio-element) A custom element for the Spotify player. | ||
- [`<jwplayer-video>`](https://github.com/luwes/jwplayer-video-element) A custom element for the JW player. | ||
- [`<wistia-video>`](https://github.com/luwes/wistia-video-element) A custom element for the Wistia player. | ||
- [`<videojs-video>`](https://github.com/luwes/videojs-video-element) A custom element for Video.js. | ||
- [`<hls-video>`](https://github.com/muxinc/hls-video-element) A custom element for playing HTTP Live Streaming (HLS) videos. | ||
- [`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/cloudflare-video-element](https://github.com/muxinc/media-elements/tree/main/packages/cloudflare-video-element) | ||
> Open issues at [muxinc/media-elements/issues](https://github.com/muxinc/media-elements/issues) |