Vanilla JS Custom HTML5 Video Player – PurePlayer

Category: Javascript | October 11, 2018
Author: ollyxar
Views Total: 1,549
Official Page: Go to website
Last Update: October 11, 2018
License: MIT


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>

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'


v1.1.1 (10/11/2018)

  • Fixed key events for Chrome

You Might Be Interested In:

Leave a Reply