# clarence-js

> Clarence JS is a Javascript Video player that can be integrated into any frontend project. It is named after Nigerian music video director, Clarence Peters.

Latest version **1.51.6** (published 2022-11-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install clarence-js
pnpm add clarence-js
yarn add clarence-js
bun add clarence-js
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.51.6 |
| Published | 2022-11-04 |
| First published | 2022-05-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 65.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ajayi Olamide |
| Maintainers | prodbyola |
| Keywords | HTML Player, Video Player, VanillaJS, Open Source |

## Links

- npm: https://www.npmjs.com/package/clarence-js
- npm.io page: https://npm.io/package/clarence-js

## Recent versions

- 1.51.6 (latest) — 2022-11-04
- 1.51.5 — 2022-11-04
- 1.51.4 — 2022-11-04
- 1.51.2 — 2022-11-04
- 1.51.1 — 2022-11-04
- 1.51.0 — 2022-11-04
- 1.5.0 — 2022-11-04
- 1.1.2 — 2022-06-02
- 1.1.1 — 2022-06-02
- 1.0.99 — 2022-06-01
- 1.0.95 — 2022-05-26
- 1.0.94 — 2022-05-26
- 1.0.93 — 2022-05-26
- 1.0.92 — 2022-05-26
- 1.0.91 — 2022-05-26
- … 7 more at https://npm.io/package/clarence-js/versions

## README

# 🚀 Clarence-Js

Clarence JS is a Javascript Video player that can be integrated into any frontend project. It is named after Nigerian music video director, Clarence Peters.

### Installation
```
npm i clarence-js --save
```

or

```
yarn clarence-js
```

### Usage
<b>Step 1:</b> Add video implement in your html.

```html
    <video id="video-id" class="aj-video">
        <source :src="content" type="video/mp4" />
    </video>
``` 

<b>Step 2:</b> Then import clarence-js in your javascript code.
```js
import ClarencePlayer from 'clarence-js'
```

If you're running an SSR application, you need to import the plugin dynamically <strong>after your app/component has been mounted</strong>. This is how it can be done in a vue ssr app. 

```js
import { onMounted } from 'vue'

onMounted(async() => {
    const loader = await import('clarence-js')
    const ClarencePlayer = loader.default
})
```

<b>Step 3:</b> Initialize and mount player.
```js
const player = new ClarencePlayer({
    nodeID: playerID.value,
    width: '824px',
    height: 'auto',
  });

  player.mount();
```

<b>Step 4: </b> Import ```clarence```'s css file.
```css
@import '~clarence-js/build/clanrence.css;'
```

---
_Source: https://npm.io/package/clarence-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._