<div class="video-controls">
	<div class="video-controls-inside">
		<div class="label">
			8 Bit music, Pumped Up Kicks | Centuries | All Star
		</div>
		<div class="controls">
			<ul>
				<li>
					<i id="mute"
					   class="fa"
					   onclick="toggleMute()"
					   aria-hidden="true"></i>
				</li>
				<li>
					<i id="play"
					   class="fa"
					   onclick="togglePlay()"
					   aria-hidden="true"></i>
				</li>
			</ul>
		</div>
	</div>
</div>
<script>
	let playing = false;
	let muted = false;
	const video = document.getElementById( 'video' );
	const playBtn = document.getElementById( 'play' );
	const muteBtn = document.getElementById( 'mute' );

	function play() {
		playing = true;
		video.play();
		playBtn.classList.add( 'fa-pause-circle-o' );
		playBtn.classList.remove( 'fa-play-circle-o' );
	}

	function stop() {
		playing = false;
		video.pause();
		playBtn.classList.remove( 'fa-pause-circle-o' );
		playBtn.classList.add( 'fa-play-circle-o' );
	}

	function mute() {
		muted = true;
		video.muted = true;
		muteBtn.classList.add( 'fa-volume-off' );
		muteBtn.classList.remove( 'fa-volume-up' );
	}

	function unmute() {
		muted = false;
		video.muted = false;
		muteBtn.classList.remove( 'fa-volume-off' );
		muteBtn.classList.add( 'fa-volume-up' );
	}

	function togglePlay() {
		if ( playing ) {
			stop();
		} else {
			play();
		}
	}


	function toggleMute() {
		if ( muted ) {
			unmute();
		} else {
			mute();
		}
	}

	setTimeout( () => {
		mute();
		play();
	}, 500 );
</script>

</body>
</html>
