Vanilla JS Custom HTML5 Video Player – PurePlayer

PurePlayer is a Vanilla JavaScript HTML5 video player that dynamically loads proper video files based on the screen size.

How to use it:

Load the style sheet pure_player.css and JavaScript pure_player.js in the document.

<link rel="stylesheet" href="dist/css/pure_player.css">
<script src="dist/js/pure_player.min.js"></script>

Apply the PurePlayer to your existing HTML5 video.

<video class="my-player" src="1.mp4"></video>

document.querySelector('.my-player').purePlayer();

Set the PurePlayer to dynamically load the proper video into the document depending on the screen size you specify.

<div class="my-player2"></div>

var player = document.querySelector('.my-player2').purePlayer({
    format: 'video/mp4',
    video: {
        '720': {
            'src': '720.mp4'
        },
        '480': {
            'src': '480.mp4'
        },
        '360': {
            'src': '360.mp4'
        },
        '240': {
            'src': '240.mp4'
        }
    }
});

Changelog:

v1.1.1 (10/11/2018)

• Fixed key events for Chrome