ozone-video-player

ozone-video-player

Customisable Ozone video player. Package in a webComponents and written in typeScript. Features:

• Play video from an url
• Play ozone Video item
• Control video (OSD) play/pause, sound, full screen
• Display control for ozone subtitles
• Add and controls markers on the video (used for video montage)

usage

Install

npm install  ozone-video-player --save

Add conf.ozone.json at root of your project. You can adapt conf.ozone.json from this repo.

use pre bundle version

To include bundle ozone-video-player element in your javaScript:

<script type="text/javascript" src="node_modules/ozone-video-player/build/index.js"></script>

<ozone-video-player></ozone-video-player>

See example in demo/Example_Bundle

Build with webpack

import {OzoneVideoPlayer} from "ozone-video-player";

// Your code here

See example in demo/Example_Import

For usage in typeScript use option "moduleResolution": "node"

API

Most important parameters.

Attribute

Attribute are javaScript properties accessible from the dom.

• hidden

hidden: Default is false. True when set. hide element and pause the player.

• video-url (alias videoUrl)

videoUrl: string Url to play a video directly

• video

video: Video OzoneVideo to play.

• markers

markers: Array Array of markers on video

• subtitlesAvailable

subtitlesAvailable: Array List of subtitles languages available

• subtitleSelected

subtitleSelected: string selected subtitle language

Properties

Only accesible for JavaScript

• player

player: ClapprPlayer Interface to Clappr player element

Methode

• loadOzoneVideo

loadOzoneVideo(data?: Video): Promise Load video from Ozone. Parameters is an Ozone Video Object

• loadVideoUrl

loadVideoUrl(url: string): Promise Load a video from an url.

Styling

The following custom css mixin properties are available for styling:

Custom property	Description	Default
--marker-bar-background	Background color of the marker's bar	rgba(29,38,43,0.52)
--resizer-color	Background color of the resizer	rgba(29,38,43,0.9)
--resizer-handle-color	Background color of the resizer's handle	rgba(255,255,255,0.2)
--marker-bar	Mixin applied to the marker's bar	{}
--resizer	Mixin applied to the marker's bar	{}
--moving-tooltip-background-color	Background color of the moving tooltip	rgba(29,38,43,0.9)
--moving-tooltip-text-color	Text color of the moving tooltip	white
--moving-tooltip-mixin	Mixin applied to the marker's bar	{}
--subtiltes-color	Color of the subtitles	#fffb00
--subtitles-font-size	Font size of the subtiltes	16px
--subtitles-weight	Font weight of the subtitles	bold
--subtitles-font-family	Font family of the subtitles	'Roboto'
--subtitles	Mixin applied to the subtitles and the subtitles' container	{}

Contribution guide

Build your package

$ npm run start

Or watch demo on change

$ npm run demo