84 lines
1.5 KiB
PHP
Executable File
84 lines
1.5 KiB
PHP
Executable File
<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>
|