<h2>Custom HTML5 Video Player with Vanilla JavaScript</h2>

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>

Enter fullscreen mode



Exit fullscreen mode

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>

Enter fullscreen mode



Exit fullscreen mode

Sample Video :- https://bit.ly/bbsamplevideo

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

3. Initialize Player

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

Enter fullscreen mode



Exit fullscreen mode

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>

Enter fullscreen mode



Exit fullscreen mode

Initialize Players

<script>
    new kwgVideo('#video-1');
    new kwgVideo('#video-2');
    new kwgVideo('#video-3');
</script>

Enter fullscreen mode



Exit fullscreen mode

Autoplay video

Set up HTML

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

Enter fullscreen mode



Exit fullscreen mode

Initialize

<script>
    new kwgVideo('#video-autoplay-1', {
        **autoplay:true**
    });
</script>

Enter fullscreen mode



Exit fullscreen mode

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>

Enter fullscreen mode



Exit fullscreen mode

<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>

Enter fullscreen mode



Exit fullscreen mode

Initialize

<script>
    new kwgVideo('#video-repeat-1', {
        **repeat:true**
    });
</script>

Enter fullscreen mode



Exit fullscreen mode

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>

Enter fullscreen mode



Exit fullscreen mode

Initialize

<script>
    new kwgVideo('#video-repeat-1');
</script>

Enter fullscreen mode



Exit fullscreen mode

webgadgets / KwgVideoPlayer

Custom HTML5 Video Player with Vanilla JavaScript

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

      </div>

JavaScript Frameworks (4 Part Series)

<div class="series-switcher__list">

      <a class="crayons-link crayons-link--contentful series-switcher__link" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--QuUf0wa1--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxiaa626ku8489d9uayo.jpg" href="/sh20raj/convert-markdown-or-md-url-to-html-markdowntohtml-using-javascript-ft-showdownjs-1med" title="Published Jan 21">
        <span class="series-switcher__num">1</span>
        <span class="series-switcher__title">Convert Markdown or md URL to HTML - MarkdownToHTML - Using JavaScript ft. showdownjs</span></a></div><div class="series-switcher__list"><a class="crayons-link crayons-link--contentful series-switcher__link" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--QuUf0wa1--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxiaa626ku8489d9uayo.jpg" href="/sh20raj/convert-markdown-or-md-url-to-html-markdowntohtml-using-javascript-ft-showdownjs-1med" title="Published Jan 21">
      </a>

      <a class="crayons-link crayons-link--contentful series-switcher__link" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--Xz84cWiR--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1tcefd9am9756jgbfhk.jpg" href="/sh20raj/fetch-github-markdown-and-show-on-blog-post-or-website-ft-showdownjs-4dm3" title="Published Jan 21">
        <span class="series-switcher__num">2</span>
        <span class="series-switcher__title">Fetch GitHub Markdown and Show on Blog Post or Website ft. showdownjs&nbsp;</span></a></div><div class="series-switcher__list"><a class="crayons-link crayons-link--contentful series-switcher__link" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--Xz84cWiR--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1tcefd9am9756jgbfhk.jpg" href="/sh20raj/fetch-github-markdown-and-show-on-blog-post-or-website-ft-showdownjs-4dm3" title="Published Jan 21">
      </a>

      <a class="crayons-link crayons-link--contentful series-switcher__link" data-preload-image="" href="/sh20raj/webscrapperjs-get-contenthtml-of-any-website-without-being-blocked-by-cors-even-using-javascript-by-whollyapi-42l7" title="Published Jan 25">
        <span class="series-switcher__num">3</span>
        <span class="series-switcher__title">WebScrapperJS - Get Content/HTML of any website without being blocked by CORS even using JavaScript by WhollyAPI</span>&nbsp;</a></div><div class="series-switcher__list"><a class="crayons-link crayons-link--contentful series-switcher__link" data-preload-image="" href="/sh20raj/webscrapperjs-get-contenthtml-of-any-website-without-being-blocked-by-cors-even-using-javascript-by-whollyapi-42l7" title="Published Jan 25"></a><a class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--active" data-preload-image="" href="/sh20raj/custom-html5-video-player-with-vanilla-javascript-kwg-video-player-4039" title="Published Feb 6"><span class="series-switcher__num">4</span>
        <span class="series-switcher__title">Custom HTML5 Video Player with Vanilla JavaScript - KWG Video Player </span>
      </a>
</div><div class="series-switcher__list"><br /></div><div class="series-switcher__list"><br /></div>

    </div>