9.1 Recording Video part.1 우선 start recording을 눌렀으면 버튼의 innerHTML이 "Stop recording"으로 바뀌게 코드를 넣는다. 그리고 finally부분을 추가하여 removeEventListener 구문을 이곳으로 옮긴다 try나 catch 부분 둘 중 하나가 실행된 후 finally구문이 실행된다. 아직 여기까지 한 것은 진짜 녹화를 한 것이 아니라 그냥 프리뷰만 보이게 한 것이니까 함수 이름을 바꾼다. (startRecording => getVideo) const recordContainer = document.getElementById("jsRecordContainer"); const recordBtn = document.getElementById(..

9.0 Getting User Media 비디오를 업로드할 때 비디오 레코드도 가능하게 하는 것을 해볼 것이다. 🍰 views 고치고 scss 만들기 우선 그걸 위해 views를 좀 고치겠다. extends layouts/main block content .form-container .record-container#jsRecordContainer video#jsVideoPreview button#jsRecordBtn Start Recording form(action=`/videos${routes.upload}`, method="post", enctype="multipart/form-data") div.fileUpload label(for="file") Video File input(type="file",..

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..