diff --git a/HTML Video Player [11-30]/652333414.mp4 b/HTML Video Player [11-30]/652333414.mp4 new file mode 100644 index 0000000..09ed31e Binary files /dev/null and b/HTML Video Player [11-30]/652333414.mp4 differ diff --git a/HTML Video Player [11-30]/index.html b/HTML Video Player [11-30]/index.html new file mode 100644 index 0000000..6dee0f3 --- /dev/null +++ b/HTML Video Player [11-30]/index.html @@ -0,0 +1,28 @@ + + + + + HTML Video Player + + + + + +
+ + +
+
+
+
+ + + + + +
+
+ + + + diff --git a/HTML Video Player [11-30]/scripts.js b/HTML Video Player [11-30]/scripts.js new file mode 100644 index 0000000..b95b0c0 --- /dev/null +++ b/HTML Video Player [11-30]/scripts.js @@ -0,0 +1,53 @@ +const player = document.querySelector('.player'); +const video = player.querySelector('.viewer'); +const progress = player.querySelector('.progress'); +const progressBar = player.querySelector('.progress__filled'); +const toggle = player.querySelector('.toggle'); +const skipButtons = player.querySelectorAll('[data-skip]'); +const ranges = player.querySelectorAll('.player__slider'); + + +function togglePlay() { + const method = video.paused? 'play' : 'pause'; + video[method](); +} + +function updateButton(){ + const icon = this.paused ? '▶️' : '⏸️'; + toggle.textContent = icon; + +} + +function skip() { + video.currentTime += parseFloat(this.dataset.skip); +} + +function handleRangeUpdate() { + video[this.name] = this.value; +} + +function handleProgress() { + const percent = (video.currentTime / video.duration) * 100; + progressBar.style.flexBasis = `${percent}%`; +} + +function scrub(e) { + const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; + video.currentTime = scrubTime; +} + +video.addEventListener('click', togglePlay); +video.addEventListener('play', updateButton); +video.addEventListener('pause', updateButton); +video.addEventListener('timeupdate', handleProgress); + +toggle.addEventListener('click', togglePlay); +skipButtons.forEach(button => button.addEventListener('click', skip)); +ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); + +let mousedown = false; + +progress.addEventListener('click', scrub); +progress.addEventListener('mousemove', (e)=> mousedown && scrub(e)); +progress.addEventListener('mousedown', ()=> mousedown = true); +progress.addEventListener('mouseup', ()=> mousedown = false); \ No newline at end of file diff --git a/HTML Video Player [11-30]/style.css b/HTML Video Player [11-30]/style.css new file mode 100644 index 0000000..f2420cd --- /dev/null +++ b/HTML Video Player [11-30]/style.css @@ -0,0 +1,162 @@ +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + margin: 0; + padding: 0; + display: flex; + background: #7A419B; + min-height: 100vh; + background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%); + background-size: cover; + align-items: center; + justify-content: center; +} + +.player { + max-width: 750px; + border: 5px solid rgba(0,0,0,0.2); + box-shadow: 0 0 20px rgba(0,0,0,0.2); + position: relative; + font-size: 0; + overflow: hidden; +} + +/* This css is only applied when fullscreen is active. */ +.player:fullscreen { + max-width: none; + width: 100%; +} + +.player:-webkit-full-screen { + max-width: none; + width: 100%; +} + +.player__video { + width: 100%; +} + +.player__button { + background: none; + border: 0; + line-height: 1; + color: white; + text-align: center; + outline: 0; + padding: 0; + cursor: pointer; + max-width: 50px; +} + +.player__button:focus { + border-color: #ffc600; +} + +.player__slider { + width: 10px; + height: 30px; +} + +.player__controls { + display: flex; + position: absolute; + bottom: 0; + width: 100%; + transform: translateY(100%) translateY(-5px); + transition: all .3s; + flex-wrap: wrap; + background: rgba(0,0,0,0.1); +} + +.player:hover .player__controls { + transform: translateY(0); +} + +.player:hover .progress { + height: 15px; +} + +.player__controls > * { + flex: 1; +} + +.progress { + flex: 10; + position: relative; + display: flex; + flex-basis: 100%; + height: 5px; + transition: height 0.3s; + background: rgba(0,0,0,0.5); + cursor: ew-resize; +} + +.progress__filled { + width: 50%; + background: #ffc600; + flex: 0; + flex-basis: 50%; +} + +/* unholy css to style input type="range" */ + +input[type=range] { + -webkit-appearance: none; + background: transparent; + width: 100%; + margin: 0 5px; +} + +input[type=range]:focus { + outline: none; +} + +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0); + background: rgba(255,255,255,0.8); + border-radius: 1.3px; + border: 0.2px solid rgba(1, 1, 1, 0); +} + +input[type=range]::-webkit-slider-thumb { + height: 15px; + width: 15px; + border-radius: 50px; + background: #ffc600; + cursor: pointer; + -webkit-appearance: none; + margin-top: -3.5px; + box-shadow:0 0 2px rgba(0,0,0,0.2); +} + +input[type=range]:focus::-webkit-slider-runnable-track { + background: #bada55; +} + +input[type=range]::-moz-range-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0); + background: #ffffff; + border-radius: 1.3px; + border: 0.2px solid rgba(1, 1, 1, 0); +} + +input[type=range]::-moz-range-thumb { + box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0); + height: 15px; + width: 15px; + border-radius: 50px; + background: #ffc600; + cursor: pointer; +}