How to Customize the Skin Online Video Player in HTML5

How to Customize the Skin Online Video Player in HTML5: BY Aaron30 Nov,2020; Tags:
HTML5 Player

Introduction

HTML5 natively supports inserting a video player into a web page, and supports all the functions of video playback. This time we are sharing an HTML5 online video player with custom skins. There are 4 skins for you to choose from. It simplifies the functions of some native players, such as previous and next, but it optimizes the default skin of the player to make the appearance of the player more concise and beautiful.

How to Customize the Skin Online Video Player in HTML5

Instructions

HTML Body Code

<section class="demo-section demo-section--light" id="skins">
	<div class="container">
		<h2 class="title heading">Skins</h2>
		<ul class="demo-list">
			<li class="demo-list__item">
				<p>Default Ckin without overlay</p>
				<video poster="ckin.jpg" src="ckin.mp4" data-ckin="default"></video>
			</li>
			<li class="demo-list__item">
				<p>Minimal Ckin with overlay</p>
				<video poster="ckin.jpg" src="ckin.mp4" data-ckin="minimal" data-overlay="1"></video>
			</li>
			<li class="demo-list__item">
				<p>Compact Ckin with overlay</p>
				<video poster="ckin.jpg" src="ckin.mp4" data-ckin="compact" data-overlay="2"></video>
			</li>
			<li class="demo-list__item">
				<p>Compact Ckin with custom color</p>
				<video poster="ckin.jpg" src="ckin.mp4" data-color="#fff000" data-ckin="compact" data-overlay="2"></video>
			</li>
			<li class="demo-list__item">
				<img src="logo.png" class="nav__logo" alt="Ckin">
				<h2 class="coming-soon">More ckins coming soon...</h2>
			</li>
		</ul>
	</div>
</section>

Css Code

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}

Js Code

(function () {
    var regExp = function regExp(name) {
        return new RegExp('(^| )' + name + '( |$)');
    };
    var forEach = function forEach(list, fn, scope) {
        for (var i = 0; i < list.length; i++) {
            fn.call(scope, list[i]);
        }
    };

    function ClassList(element) {
        this.element = element;
    }

    ClassList.prototype = {
        add: function add() {
            forEach(arguments, function (name) {
                if (!this.contains(name)) {
                    this.element.className += ' ' + name;
                }
            }, this);
        },
        remove: function remove() {
            forEach(arguments, function (name) {
                this.element.className = this.element.className.replace(regExp(name), '');
            }, this);
        },
        toggle: function toggle(name) {
            return this.contains(name) ? (this.remove(name), false) : (this.add(name), true);
        },
        contains: function contains(name) {
            return regExp(name).test(this.element.className);
        },

        replace: function replace(oldName, newName) {
            this.remove(oldName), this.add(newName);
        }
    };

    if (!('classList' in Element.prototype)) {
        Object.defineProperty(Element.prototype, 'classList', {
            get: function get() {
                return new ClassList(this);
            }
        });
    }

    if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
        DOMTokenList.prototype.replace = ClassList.prototype.replace;
    }
})();

VIEW NOW