KWG Video Player

Custom HTML5 Video Player with Vanilla JavaScript
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.

How to use

1. Load jQuery and include Modal box plugin files
<link rel="stylesheet" type="text/css" href="kwg-video-player.min.css" />
<script src="kwg-video-player.min.js"></script>
2. Set up your HTML
<video id="video1" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
3. Call the plugin
<script>
    new kwgVideo('#video1');
</script>
Open in a new window

Examples

Multiple video players
Multiple KWG Video Players on one page

Set up 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>
Call the plugin
<script>
    new kwgVideo('#video-1');
    new kwgVideo('#video-2');
    new kwgVideo('#video-3');
</script>
Open in a new window
Autoplay video
Set up HTML
<video id="video-autoplay-1" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
</video>
Call the plugin
<script>
    new kwgVideo('#video-autoplay-1', {
        autoplay:true
    });
</script>

or

HTML video autoplay Attribute

Set up HTML
<video id="video-autoplay-2" width="400" height="225" autoplay>
    <source src="path/to/video" type="video/mp4">
</video>
Call the plugin
<script>
    new kwgVideo('#video-autoplay-2');
</script>

 
Repeat video
Set up HTML
<video id="video-repeat-1" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
</video>
Call the plugin
<script>
    new kwgVideo('#video-repeat-1', {
        repeat:true
    });
</script>

or

HTML video loop Attribute

Set up HTML
<video id="video-repeat-2" width="400" height="225" loop>
    <source src="path/to/video" type="video/mp4">
</video>
Call the plugin
<script>
    new kwgVideo('#video-repeat-2');
</script>

 
Open in a new window
Github Download Documentation