clarence-js

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

Step 1: Add video implement in your html.

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

Step 2: Then import clarence-js in your javascript code.

import ClarencePlayer from 'clarence-js'

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

import { onMounted } from 'vue'

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

Step 3: Initialize and mount player.

const player = new ClarencePlayer({
    nodeID: playerID.value,
    width: '824px',
    height: 'auto',
  });

  player.mount();

Step 4: Import clarence's css file.

@import '~clarence-js/build/clanrence.css;'