[TDL] 05/01 Today's-Done-List

- JavaScript youtube-video

• Fullscreen() 메서드 사용
  https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
  
  • Document.exitFullscreen() : 전체 화면 모드에서 창 모드로 다시 전환하도록 요청
  • Element.requestFullscreen() : 사용자 브라우저에 지정된 요소를 전체 화면 모드로 전환하여 브라우저의 모든 UI 요소와 다른 모든 응용 프로그램을 화면에서 제거하도록 요청
  • 사용자마다 사용하는 브라우저가 다르기에 (예: mozFullScreenElement, msFullscreenElement, webkitFullscreenElement)을 확인해야 하고, 지원하지 않는 모델일 경우를 대비해서 alert로 예외처리도 해주자.
  • 값이 null 이면 문서가 현재 창 모드이므로 전체 화면 모드로 전환해야 하며,
    전체 화면 모드로의 전환은 요소를 호출 Element.requsetFullscreen()하여 수행.
  • fullScreen일 경우 클릭을 하면 fullScreen이 닫히고, fullScreen이 아닐 경우 클릭을 하면, fullScreen이 열린다.

const $fullScreen = get('.js-fullScreen')
$fullScreen.addEventListener('click', fullScreen)

const fullScreen = () => {
    if ($player.requestFullscreen)
      if (document.fullScreenElement) {
        document.cancelFullScreen()
      } else {
        $player.requestFullscreen()
      }
    else if ($player.msRequestFullscreen)
      if (document.msFullscreenElement) {
        document.msExitFullscreen()
      } else {
        $player.msRequestFullscreen()
      }
    else if ($player.mozRequestFullScreen)
      if (document.mozFullScreenElement) {
        document.mozCancelFullScreen()
      } else {
        $player.mozRequestFullScreen()
      }
    else if ($player.webkitRequestFullscreen)
      if (document.webkitFullscreenElement) {
        document.webkitCancelFullScreen()
      } else {
        $player.webkitRequestFullscreen()
      }
    else {
      alert('Not Supported')
    }
  }

 

• 비디오 play, replay, stop, mute 기능
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
  
  • click event를 사용하여 각각의 기능을 동작하는 함수를 생성하고
  • 각 기능에 해당하는 button을 클릭 시 UI를 바꿔주기 위해서 buttonChange라는 함수를 하나 생성하였다.
  • video에 내재되어있는 속성 progress, play, pause, muted, ended를 사용.
  • 만약 비디오가 멈춰있거나 미디어의 끝에 도달해서 재생이 중지되었을 경우,
    버튼은 pause를 표시하고 pause버튼 클릭 시 play.
    반대로 아직 재생되고 있는 상태라면 버튼을 play로 표시하고 play버튼 클릭 시 pause.
  • 만약 리플레이 버튼을 누른다면, progress bar와 currentTime이 초기화되고,
    비디오가 다시 새롭게 play 되고, play버튼은 pause로 바꾸어 중지시킬 수 있는 상태로 변환.
  • pause를 누르면 비디오가 멈추고 currentTime이 초기화되며, pause버튼을 play로 바꾸어 재생시킬 수 있는 상태로 변환.
  • mute 버튼을 클릭 시 unmute로 변환되며 속성 역시 true로 전환된다. (unmute상태 : false)

$btnPlay.addEventListener('click', playVideo)
$btnReplay.addEventListener('click', replayVideo)
$btnStop.addEventListener('click', stopVideo)
$btnMute.addEventListener('click', mute)

 const $player = get('.view video')
 
 const playVideo = () => {
    if ($player.paused || $player.ended) {
      buttonChange($btnPlay, 'pause')
      $player.play()
    } else {
      buttonChange($btnPlay, 'play')
      $player.pause()
    }
  }

  const replayVideo = () => {
    resetPlayer()
    $player.play()
    buttonChange($btnPlay, 'pause')
  }
  
   const resetPlayer = () => {
    $progress.value = 0
    $player.currentTime = 0
  }

  const stopVideo = () => {
    $player.pause()
    $player.currentTime = 0
    buttonChange($btnPlay, 'play')
  }
  
    const mute = () => {
    if ($player.muted) {
      buttonChange($btnMute, 'mute')
      $player.muted = false
    } else {
      buttonChange($btnMute, 'unmute')
      $player.muted = true
    }
  }

  const buttonChange = (btn, value) => {
    btn.innerHTML = value
    console.log(btn.innerHTML)
  }

 

• 비디오가 진행될 때 실행되는 progress
  • video에 내재되어있는 속성 timeupdate, progress, duration, currrentTime를 사용.
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
  • timeupdate : 시간이 업데이트되면 이벤트가 시작
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event
  • duration : 요소의 미디어 길이를 초 단위로 나타냄.
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration
  • getCurrent : $progress의 전체 넓이에서 내가 마우스로 클릭한 e.offsetX의 넓이를 나누어 퍼센트로 정의하여,
    미디어 길이에서 퍼센트를 곱하면 현재 재생되고 있는 시간을 나타낸 후 currentTime에 넣어준다.
  • setProgress : 미디어 길이에서 100을 나눈 후, getCurrent에서 대입한 currentTime을 곱하여 재생되는 길이의 퍼센티지를 구하여 $progress의 value에 대입해주면, 프로그래스 바가 잘 작동된다.

$player.addEventListener('timeupdate', setProgress)
$progress.addEventListener('click', getCurrent)

const setProgress = () => {
    let percentage = Math.floor((100 / $player.duration) * $player.currentTime)
    $progress.value = percentage
  }

  const getCurrent = (e) => {
    let percent = e.offsetX / $progress.offsetWidth
    $player.currentTime = percent * $player.duration
  }

---

- 자료구조 / 알고리즘 (Js ver.) 강의

---

[ 출처, 참고 : 제로베이스 프런트엔드 스쿨 ]