Skip to content

Commit

Permalink
Project Completed
Browse files Browse the repository at this point in the history
  • Loading branch information
@Matthew-G-Barnes
Matthew-G-Barnes committed Sep 10, 2024
0 parents commit e4ef01a
Show file tree
Hide file tree
Showing 4 changed files with 517 additions and 0 deletions.
Binary file added favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
74 changes: 74 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Video Player</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Car Racing (1080P)-->
<!-- https://pixabay.com/videos/download/video-41758_source.mp4?attachment -->
<!-- Lake (4K) -->
<!-- https://pixabay.com/videos/download/video-28745_source.mp4?attachment -->
<!-- Ocean (720P)-->
<!-- https://pixabay.com/videos/download/video-31377_tiny.mp4?attachment -->
<div class="player">
<video src="https://pixabay.com/videos/download/video-41758_source.mp4?attachment" class="video" playsinline></video>
<!-- Show Controls -->
<div class="show-controls">
<!-- Controls Container -->
<div class="controls-container">
<!-- Progress Bar -->
<div class="progress-range" title="Seek">
<div class="progress-bar"></div>
</div>
<div class="control-group">
<!-- Left Controls -->
<div class="controls-left">
<!-- Play/Pause -->
<div class="play-controls">
<i class="fas fa-play" title="Play" id="play-btn"></i>
</div>
<!-- Volume -->
<div class="volume">
<div class="volume-icon">
<i class="fas fa-volume-up" title="Mute" id="volume-icon"></i>
</div>
<div class="volume-range" title="Change Volume">
<div class="volume-bar"></div>
</div>
</div>
</div>
<!-- Right Controls -->
<div class="controls-right">
<!-- Speed -->
<div class="speed" title="Playback Rate">
<select name="playbacrate" class="play-speed">
<option value="0.5">0.5 x</option>
<option value="0.75">0.75 x</option>
<option value="1" selected>1 x</option>
<option value="1.5">1.5 x</option>
<option value="2">2 x</option>
</select>
</div>
<!-- Time -->
<div class="time">
<span class="time-elapsed">00:00 / </span>
<span class="time-duration">00:00</span>
</div>
<!-- fullscreem -->
<div class="fullscreen">
<i class="fas fa-expand"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
154 changes: 154 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
const player = document.querySelector('.player')
const video = document.querySelector('video')
const progressRange = document.querySelector('.progress-range')
const progressBar = document.querySelector('.progress-bar')
const playBtn = document.getElementById('play-btn')
const volumeIcon = document.getElementById('volume-icon')
const volumeRange = document.querySelector('.volume-range')
const volumeBar = document.querySelector('.volume-bar')
const currentTime = document.querySelector('.time-elapsed')
const durration = document.querySelector('.time-duration')
const speed = document.querySelector('.play-speed')
const fullscreenBtn = document.querySelector('.fullscreen')

// Play & Pause ----------------------------------- //

function showPlayIcon() {
playBtn.classList.replace('fa-pause', 'fa-play')
playBtn.setAttribute('title', 'Play')
}

function togglePlay() {
if (video.paused) {
video.play()
playBtn.classList.replace('fa-play', 'fa-pause')
playBtn.setAttribute('title', 'Pause')
} else {
video.pause()
showPlayIcon()
}
}

// On Video End, show Play buttoin icon
video.addEventListener('ended', showPlayIcon)

// Progress Bar ---------------------------------- //

// Calculate display time format
function displayTime(time) {
const minutes = Math.floor(time / 60);
let seconds = Math.floor(time % 60).toString().padStart(2, '0')
return `${minutes}:${seconds}`
}


// update prgress bar as video plays
function updateProgress() {
progressBar.style.width = `${(video.currentTime / video.duration) * 100}%`
currentTime.textContent = `${displayTime(video.currentTime)} /`;
durration.textContent = `${displayTime(video.duration)}`
}

// Click to seek within the video
function setProgress(e) {
const newTime = (e.offsetX / progressRange.offsetWidth)
progressBar.style.width = `${newTime * 100}%`
video.currentTime = newTime * video.duration
}

// Volume Controls --------------------------- //

let lastVolume = 1

// Change icon depending on volume
function updateVolumeIcon(Volume) {
volumeIcon.className = 'fas'
if (Volume > 0.5) {
volumeIcon.classList.add('fa-volume-up')
} else if (Volume < 0.5 && Volume > 0) {
volumeIcon.classList.add('fa-volume-down')
} else if (Volume === 0) {
volumeIcon.classList.add('fa-volume-off')
}
}

// Volume Bar
function changeVolume(e) {
let volume = e.offsetX / volumeRange.offsetWidth
// Rounding volume up or down
if (volume < 0.1) {
volume = 0;
}
if (volume > 0.9) {
volume = 1;
}
volumeBar.style.width = `${volume * 100}%`
video.volume = volume
updateVolumeIcon(volume)
lastVolume = volume
}

// Mute/Unmute
function toggleMute() {
if (volumeIcon.className !== 'fas fa-volume-mute') {
lastVolume = video.volume
video.volume = 0;
volumeBar.style.width = 0
volumeIcon.className = 'fas fa-volume-mute'
volumeIcon.setAttribute('title', 'Unmute')
} else {
video.volume = lastVolume
volumeBar.style.width = `${lastVolume * 100}%`
updateVolumeIcon(lastVolume)
volumeIcon.setAttribute('title', 'Mute')
}
}

// Fullscreen ------------------------------- //

/* View in fullscreen */
function openFullscreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
video.classList.add('video-fullscreen')
}

/* Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
video.classList.remove('video-fullscreen')
}

let fullscreen = false

// Toggle Fullscreen
function toggleFullscreen() {
if (!fullscreen) {
openFullscreen(player)
} else {
closeFullscreen()
}
fullscreen = !fullscreen
}

// Event Listeners
playBtn.addEventListener('click', togglePlay)
video.addEventListener('click', togglePlay)
video.addEventListener('timeupdate', updateProgress)
video.addEventListener('canplay', updateProgress)
progressRange.addEventListener('click', setProgress)
volumeRange.addEventListener('click', changeVolume)
volumeIcon.addEventListener('click', toggleMute)
speed.addEventListener('change', () => {video.playbackRate = speed.value})
fullscreenBtn.addEventListener('click', toggleFullscreen)
Loading

0 comments on commit e4ef01a

Please sign in to comment.