8.5 Volume Bar part.1 비디오가 끝났을 때 시간을 처음으로 다시 돌려 놓을거고 비디오를 멈출것이다. (현재는 비디오가 예를 들어 52초짜리면 다 재생되면 00:00:52/ 00:00:52 라고 떠있다. 그리고 플레이버튼은 ⏸ 에 머물러있다. 우리는 ▶이 되기를 원한다.) function handleEnded(){ videoPlayer.currentTime = 0; playBtn.innerHTML = ''; } function init(){ playBtn.addEventListener("click", handlePlayClick); volumeBtn.addEventListener("click", handleVolumeClick); fullScreenBtn.addEventListener("c..

8.4 Total time and Current time 많은 브라우저에서 동작할 수 있도록 if문을 이용해서 goFullScreen과 exitFullScreen을 수정한다. function exitFullScreen(){ // document.exitFullscreen();//전체화면을 종료하기 if(document.exitFullscreen){ document.exitFullscreen(); }else if(document.mozCancelFullScreen){ document.mozCancelFullScreen(); }else if(document.webkitExitFullscreen){ document.webkitExitFullscreen(); }else if(document.msExitFulls..

8.3 Enter Fullscreen / Exit Fullscreen 🥞이번시간에 해볼 것: 누르면 전체 화면이 되고 다시 누르면 전체화면이 종료되는 버튼을 기능을 구현해보겠다. 🍪videoPlayer.pug에 아이디 추가하기 늘 그랬듯이 videoPlayer.pug에 아이디를 추가한다. (#jsFullScreen) mixin videoPlayer(video = {}) .videoPlayer#jsVideoPlayer video(src=`/${video.src}`) .videoPlayer__controls .videoPlayer__column span#jsVolumeButton i.fas.fa-volume-up span |00:00 / 10:00 .videoPlayer__column span#jsPlayB..

8.2 Mute / UnMute 🍙 이번시간에 해볼 것 : 🔊볼륨 ON(Unmute) / 🔇볼륨OFF(Mute) 참고: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement HTMLMediaElement - Web APIs | MDN HTMLMediaElement The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video. The HTMLVideoElement and HTMLAudioElement element..

8.1 Play Pause Functionality 🍔 assets > js > videoPlayer.js 파일을 만든다 그리고 이것을 사용할 수 있도록 main.js에서 videoPlayer.js 파일을 import 해준다. import "../scss/styles.scss"; import "./videoPlayer"; ↑ main.js 🍔 videoBlock.pug에 id를 따로 추가해준다 오직 자바스크립트에서만 사용하고 싶기 때문에 아이디를 추가하는 것이다. mixin videoPlayer(video = {}) .videoPlayer#jsVideoPlayer video(src=`/${video.src}`) .videoPlayer__controls .videoPlayer__column span i.f..

8.0 Starting the Video Player 이번 chapter 8에서는 비디오플레이어에 대한 front-end부분을 해볼 것이다. 원래는 video의 속성으로 autoplay=true, controls=true라고 쓰면 자동으로 비디오플레이어가 될 수 있지만 이걸 직접 구현해보려고 한다! 🍕views > mixins > videoPlayer.pug를 만든다. mixin videoPlayer(video = {}) .videoPlayer video(src=`/${video.src}`) .videoPlayer__controls .videoPlayer__column span i.fas.fa-volume-up span |00:00 / 10:00 .videoPlayer__column span i.fas...