Video player test

by Emanuele del Grande

HTML

<div class="logo">
    <span>JS</span> <span>Video player</span>
    <div>Custom video player basics</div>
</div>

<p>Testing HTML5 video APIs.<br />
To be experimented: <a href="https://blog.alexdevero.com/build-custom-html5-video-player/">build custom HTML5 video player</a></p>

<div class="video-container">
    <video class="video" id="video" controlsList="nofullscreen nodownload" preload="none" poster="https://images.unsplash.com/photo-1488085061387-422e29b40080?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80">
        <source src="https://plugvue.com/static/media/video/v01.mp4" type="video/mp4">
        <source src="https://plugvue.com/static/media/video/v02.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
    <div>
        <button id="ui-player-stop">[]</button>
        <button id="ui-player-play">&gt;</button>
        <button id="ui-player-rewind">&lt;&lt;</button>
        <button id="ui-player-forward">&gt;&gt;</button>
    </div>
</div>

<!--
    https://blog.addpipe.com/10-advanced-features-in-html5-video-player/
-->

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }

/* SPECIFIC STYLE */
.video-container {max-width: 800px; background: 000; }
.video { width: 100%; }

JavaScript

document.addEventListener('DOMContentLoaded', _init);
var _player,
	_playBtn,
    _stopBtn,
    _rewindBtn,
    _forwardBtn,
    _jumpStep; // interval in seconds to skip with fast forward or rewind

function _init() {
	_player = document.getElementById('video');

    _playBtn = document.getElementById('ui-player-play');
    _stopBtn = document.getElementById('ui-player-stop');
    _rewindBtn = document.getElementById('ui-player-rewind');
    _forwardBtn = document.getElementById('ui-player-forward');
    
    _jumpStep = 2;
    _setHandlers();
};
var _setHandlers = function() {
    _playBtn && _playBtn.addEventListener('click', _togglePlay);
    _stopBtn && _stopBtn.addEventListener('click', _stop);
    _rewindBtn && _rewindBtn.addEventListener('click', _rewind);
    _forwardBtn && _forwardBtn.addEventListener('click', _forward);
};
var _play = function() {
    _player.play();
    _playBtn.classList.remove('ui-player-play-btn-pause');
    _playBtn.classList.add('ui-player-play-btn-playing');
    
    // temp:
    _playBtn.innerHTML = "&gt;"
};
var _togglePlay = function() {
	return _player.paused ? _play() : _pause();
};
var _pause = function() {
	if (!_player.paused) {
		_player.pause();
        _playBtn.classList.remove('ui-player-play-btn-playing');
        _playBtn.classList.add('ui-player-play-btn-pause');
        // temp:
        _playBtn.innerHTML = "||";
    }
};
var _stop = function() {
	if (!_player.paused) {
    	_pause();
    }
	_player.currentTime = 0;
};
var _forward = function(e) {
    _player.currentTime = Math.min(_player.duration, _player.currentTime + _jumpStep);
};
var _rewind = function(e) {
    _player.currentTime = Math.max(0, _player.currentTime - _jumpStep);
};