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.
Integration
1. Load CDNs
<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
<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
<script>
new kwgVideo('#video1');
</script>
Multiple KWG Video Players on one page
Add 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
<script>
new kwgVideo('#video-1');
new kwgVideo('#video-2');
new kwgVideo('#video-3');
</script>
Autoplay video
Set up HTML
<video id="video-autoplay-1" width="400" height="225">
<source src="path/to/video" type="video/mp4">
</video>
Initialize
<script>
new kwgVideo('#video-autoplay-1', {
**autoplay:true**
});
</script>
or
HTML video autoplay Attribute
Set up HTML
Copy
<video id="video-autoplay-2" width="400" height="225" autoplay\>
<source src="path/to/video" type="video/mp4">
</video>
<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>
Initialize
<script>
new kwgVideo('#video-repeat-1', {
**repeat:true**
});
</script>
or
HTML video loop Attribute Like this
<video id="video-repeat-2" width="400" height="225" loop\>
<source src="path/to/video" type="video/mp4">
</video>
Initialize
<script>
new kwgVideo('#video-repeat-1');
</script>
webgadgets / KwgVideoPlayer
Custom HTML5 Video Player with Vanilla JavaScript
Source Doc :- https://webgadgets.net/plugins/custom-html5-video-player
This comment has been removed by the author.
ReplyDeletehey
ReplyDelete