vidplayer

v1.0.1

Published

2 years ago

A simple to use videoplayer to do the styling and fixes the eventhandlers

Downloads

0High
0Medium
0Low

stefanradouane

Front-end Videoplayer Javascript

vidplayer

🎥 About this project

Styling the default controls of an HTML <video> is not possible, but what if you want to make a custom vidplayervividplayers the solution for this problem. With this js front-end library you can create an vidpvidplayerr than ever before.

✨ Installation

Using this library is very easy, use it by simply adding a <script> tag to your HTML.

So you want to use this library with a script tag:

First of all add the script tag to your website. The source of this URL should be url

  <body>
    ...
    <script src="https://stefanradouane.github.io/vidplayer/script.js"></script>
  </body>

Now you have to add the link tag to the head of your website. The source of this URL should be

<head>
  ...
  <link rel="stylesheet" href="https://stefanradouane.github.io/vidplayer/style.css" />
</head>

Well done, for now you are all set up, ain't that easy

There might be a change that these links doesn't work. In that case it's good that you have installed the module so you have these files locally inside your node_modules directory

Using this library

You have now installed this library. The usage of this library depends if you have installed it from NPM or with a script tag.

You added the the script tag on your HTML page. Now you have to create a vidplayer

First create your video element and add the class name of vidplayer

<video class="vidplayer
  <source ...>
</video>

This vidplayeran be configured by adding a dataset attribute of settings to this vividplayer

<video class="vidplayerdata-settings="{}">

Well done, you have created a default vidplayerem>

Adding a theme to the vidplayer

There are a couple automatic created themes you can use. These are:

default
minimal
box
box-minimal
flashy
flashy-minimal

You can use a theme by simply defining a theme in the dataset settings.

<video class="vidplayerdata-settings="{'theme': 'THEME NAME'}">

If there is no theme defined the default theme will be used.

Adding a colorscheme to the vidplayer/strong>

The colorscheme contains three colors. These colors are:

The base color
- This is the background color of a controllable part (eg. the background of the controller section).
- this color can be undefined than in will be created by itself (default = rgba(11,11,11, 0.75))
The tile color
- This is the fill color of the icons (eg. icon play)
- this color can be undefined than in will be created by itself (default = rgba(220, 220, 220, 1))
The hover color
- This color is the fill color when a control is hovered.
- this color can be undefined than in will be created by itself (default = tile color * 80%)

You can apply your sites colorscheme to the vidplayery defining the colorscheme tot the dataset settings. To define the colorscheme there are a couple posibilities The color value can be RGB, RGBA, HEX or an CSScolorName

Define only the tile color.

By defining a String as the colorscheme only the tile color will be set.

<video class="vidplayerdata-settings="{'colorscheme': 'COLOR'}">

Define base color and tile color

By defining an Array of two value's as the color scheme the tile color an base color will be defined.

<video class="vidplayerdata-settings="{'colorscheme': ['COLOR', 'COLOR']}">

The first value represents the base color, and the second value the tile color

Define base color, tile color and hover color

By defining an Array of three value's as the color scheme the tile color, base color and hover color will be defined.

<video class="vidplayerdata-settings="{'colorscheme': ['COLOR', 'COLOR', 'COLOR']}">

The first value represents the base color, the second value the tile color and the third value the hover color

If there is no theme defined the default theme will be used.

That's it. Enjoy the vidplayer

Use case

<head>
...
<link rel="stylesheet" src="https://stefanradouane.github.io/vidplayer/style.css">
</head>

<body>
...
<video class="vidplayerdata-settings="{'theme': 'flashy', 'colorscheme': ['rgba(21,28,30,0.75)', 'rgb(190, 30, 200)']}">
  <source>
</video>
...
<script src="https://stefanradouane.github.io/vidplayer/script.js"></script>
</body>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vidplayer

🎥 About this project

✨ Installation

Using this library

That's it. Enjoy the vidplayer

Use case