forked from wesbos/JavaScript30
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added notes and solution for Project 11 - Custom HTML5 Video Player
- Loading branch information
1 parent
9525912
commit e1ab708
Showing
3 changed files
with
159 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,32 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>HTML Video Player</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <div class="player"> | ||
| <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video> | ||
| <div class="player"> | ||
| <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video> | ||
|
|
||
| <div class="player__controls"> | ||
| <div class="progress"> | ||
| <div class="player__controls"> | ||
| <div class="progress"> | ||
| <div class="progress__filled"></div> | ||
| </div> | ||
| <button class="player__button toggle" title="Toggle Play">►</button> | ||
| <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1"> | ||
| <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1"> | ||
| <button data-skip="-10" class="player__button">« 10s</button> | ||
| <button data-skip="25" class="player__button">25s »</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <button class="player__button toggle" title="Toggle Play">►</button> | ||
| <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1"> | ||
| <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1"> | ||
| <button data-skip="-10" class="player__button">« 10s</button> | ||
| <button data-skip="25" class="player__button">25s »</button> | ||
| <!-- Add fullscreen button --> | ||
| <button class="player__button fullscreen"> ⎚</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="scripts.js"></script> | ||
| </body> | ||
| </html> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| /*** GET DOM ELEMENTS ***/ | ||
|
|
||
| const player = document.querySelector('.player'); | ||
| const video = player.querySelector('.viewer'); | ||
|
|
||
| const progress = player.querySelector('.player__controls .progress'); | ||
| const progressBar = player.querySelector('.player__controls .progress__filled'); | ||
|
|
||
| const toggleButton = player.querySelector('.player__controls .toggle'); | ||
| const ranges = player.querySelectorAll('.player__controls .player__slider'); | ||
| const skipButtons = player.querySelectorAll('[data-skip]'); | ||
|
|
||
| const fullScreen = player.querySelector('.player__controls .fullscreen'); | ||
|
|
||
| // set default progress bar to 0% when video first load | ||
| progressBar.style.flexBasis = '0%'; | ||
|
|
||
|
|
||
| /*** BUILD VIDEO PLAYER FUNCTIONS ***/ | ||
|
|
||
| // Start or pause video when PLAY button is clicked | ||
| function togglePlay(){ | ||
| video.paused ? video.play() : video.pause(); | ||
| }; | ||
|
|
||
| // Update play button symbol | ||
| function updateButton() { | ||
| const icon = this.paused ? '►' : '❚ ❚'; | ||
| toggleButton.textContent = icon; | ||
| }; | ||
|
|
||
| // Video skip forward | ||
| function skip(){ | ||
| let skipTime = this.dataset.skip; | ||
| video.currentTime += parseFloat(skipTime); | ||
| }; | ||
|
|
||
| // Update video volume or playback rate | ||
| function handleRangeUpdate(){ | ||
| video[this.name] = this.value; | ||
| } | ||
|
|
||
| // function handleProgress() in Wes' video | ||
| // Update progress bar as video plays | ||
| function showProgress(){ | ||
| const percentPlayed = (video.currentTime / video.duration) * 100; | ||
| progressBar.style.flexBasis = `${percentPlayed}%`; | ||
| } | ||
|
|
||
| // function scrub() in Wes' video | ||
| // By clicking on progress bar, start video at clicked position | ||
| function setVideoStart(e){ | ||
| const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; | ||
| video.currentTime = scrubTime; | ||
| } | ||
|
|
||
| // Check if user is clicking down on mouse | ||
| let mousedown = false; // set a mousedown flag to check if mouse is clicked | ||
|
|
||
| function trackMouseClick() { | ||
| mousedown = !mousedown; | ||
| } | ||
|
|
||
| // STRETCH GOAL: Toggle fullscreen when user click on button | ||
| let fullscreen = false; | ||
|
|
||
| function toggleFullScreen(e){ | ||
| if (fullscreen || e.keyCode === 27) { //if ESCAPE key pressed | ||
| player.style = 'max-width: 750px;'; | ||
| document.querySelector('body').style = 'background: #7A419B;'; | ||
| fullscreen = false; | ||
| } else { | ||
| player.style = 'max-width: none; width: 100%; height:100%; border: 0; padding: 0; overflow: hidden;'; | ||
| document.querySelector('body').style = 'background: #000;'; | ||
| fullscreen = true; | ||
| } | ||
| } | ||
|
|
||
| /*** HOOK UP EVENT LISTENERS ***/ | ||
|
|
||
| // Play or pause video on mouse click | ||
| video.addEventListener('click', togglePlay); | ||
| toggleButton.addEventListener('click', togglePlay); | ||
|
|
||
| // Update toggleButton on video play or pause | ||
| video.addEventListener('play', updateButton); | ||
| video.addEventListener('pause', updateButton); | ||
|
|
||
| // Add event listener to SKIP buttons | ||
| skipButtons.forEach(btn => btn.addEventListener('click', skip)) | ||
|
|
||
| // Add event listener to RANGE buttons | ||
| ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); | ||
| ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); | ||
|
|
||
| // Add event listener to update video progress bar | ||
| video.addEventListener('timeupdate', showProgress); | ||
|
|
||
| // Add event listener to update video startTime based on user's click on progress bar | ||
| progress.addEventListener('click', setVideoStart); | ||
|
|
||
| // Add event listener to check if user is click the mouse | ||
| progress.addEventListener('mousedown', trackMouseClick); | ||
| progress.addEventListener('mouseup', trackMouseClick); | ||
|
|
||
| // Add event listener, if user mouse clicks and DRAG progress bar, update video start time | ||
| progress.addEventListener('mousemove', (e) => mousedown && setVideoStart(e)); | ||
|
|
||
| /*** STRETCH GOAL: MAKE FULL SCREEN BUTTON WORK ***/ | ||
| fullScreen.addEventListener('click', toggleFullScreen); | ||
| window.addEventListener('keyup', toggleFullScreen); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters