js-player/README.md

A lightweight custom js video player web component built with pure JavaScript. It can be used in any application that supports JavaScript, including frameworks like Angular, React, Vue, and others.

# js-player 🎥

A lightweight custom video player built as a reusable **Web Component** using pure JavaScript.  
It works seamlessly across any modern web framework like **React**, **Angular**, **Vue**, or even plain HTML/JavaScript apps.

---


## ✨ Features

- ✅ Pure JavaScript (no dependencies)
- ✅ Framework-agnostic Web Component
- ✅ Easy to integrate in any frontend stack
- ✅ Customizable UI
- ✅ Lightweight and fast

---


## 🚀 Installation

```bash
npm install js-player
```

Or include directly in HTML via CDN (optional):

```html
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/js-player@latest/js-player.js"></script>
```

---


## 🧩 Usage

### In HTML:

```html
<js-player src="video.mp4" poster="poster.jpg"></js-player>

<script type="module">
  import "js-player"; // Ensure this path is correct for your project setup
</script>

<!-- Or CDN -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/js-player@latest/js-player.js"></script>
```

### In React:

```jsx
import "js-player";

function App() {
  return (
    <div>
      <h2>Custom JS Video Player</h2>
      <js-player src="video.mp4" poster="poster.jpg"></js-player>
    </div>
  );
}
```

### In Angular:

In `angular.json`, include:

```json
"scripts": [],
"assets": ["node_modules/js-player"]
```

Then, use it in your component template:

```html
<js-player src="video.mp4" poster="poster.jpg"></js-player>
```

---


## ⚙️ Attributes

| Attribute  | Description                                         | Required | Default |
|------------|-----------------------------------------------------|----------|---------|
| `src`      | Source URL of the video or audio file               | ✅       | —       |
| `poster`   | Optional image shown before video loads             | ❌       | —       |
| `type`     | Media type: `"video"` or `"audio"` (string accepted)| ❌       | `video` |
| `color`    | Player UI accent color (CSS color value)             | ❌       | `white` |
---