Custom HTML5 Video Player with Vanilla JavaScript - KWG Video Player
Tags: javascript, css, videoplayer, sopplayer
Published: 2022-02-06 06:37:41

Custom HTML5 Video Player with Vanilla JavaScript

{% youtube https://youtu.be/WEi8amLFwL8 %}

---

{% codepen https://codepen.io/SH20RAJ/pen/oNoYZJw %}

---
KWG Video Player is a free custom HTML5 video player. It is written in Vanilla JavaScript and no library is required for it to run.  
The video player can be used in different web projects freely. Multiple instances of the video player can be used in a single page. and the appearance of the player can be customized.  
  
Upon creating a KWG Video Player, an Object is created in which one of the members is html5 `<video>` element and all Media events, properties and methods are available for it.

For the whole functionality of **KWG Video Player**, see [documentation source](/plugins/custom-html5-video-player/doc).

# Integration
----------

**1\. Load CDNs**

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/webgadgets/KwgVideoPlayer@master/kwg-video-player.css" />
<script src="https://cdn.jsdelivr.net/gh/webgadgets/KwgVideoPlayer@master/kwg-video-player.js"></script>
```

**2\. Set up your HTML**

```html
<video id="video1" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
```
> Sample Video :- https://bit.ly/bbsamplevideo

> Sample Poster :- https://bit.ly/bbsampleposter

**3\. Initialize Player**

```html
<script>
    new kwgVideo('#video1');
</script>
```
--------

## Multiple KWG Video Players on one page  

**Add HTML**
```html
<video id="video-1" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
</video>
<video id="video-2" width="400" height="225"> 
    <source src="path/to/video" type="video/mp4">
</video>
<video id="video-3" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
</video>
```

**Initialize Players**
```html
<script>
    new kwgVideo('#video-1');
    new kwgVideo('#video-2');
    new kwgVideo('#video-3');
</script>
```
### Autoplay video

**Set up HTML**

```html
<video id="video-autoplay-1" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
</video>
```
**Initialize**
```html
<script>
    new kwgVideo('#video-autoplay-1', {
        **autoplay:true**
    });
</script>
```
  
or  
  
### HTML video **autoplay** Attribute  
  
Set up HTML

Copy

```html
<video id="video-autoplay-2" width="400" height="225" autoplay\>
    <source src="path/to/video" type="video/mp4">
</video>
```
```html
<script>
    new kwgVideo('#video-autoplay-2');
</script>
```
  
 

### Repeat video

**Set up HTML**

```html
<video id="video-repeat-1" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
</video>
```

**Initialize**
```html
<script>
    new kwgVideo('#video-repeat-1', {
        **repeat:true**
    });
</script>
```
  
or  
  
HTML video **loop** Attribute  Like this

```html
<video id="video-repeat-2" width="400" height="225" loop\>
    <source src="path/to/video" type="video/mp4">
</video>
```
**Initialize**
```html
<script>
    new kwgVideo('#video-repeat-1');
</script>
```

---

{% github https://github.com/webgadgets/KwgVideoPlayer/ %}

Source Doc :- https://webgadgets.net/plugins/custom-html5-video-player