<Custom Player> HTML CSS

브라우저에서 제공하는 video 탬플릿을 사용해도 좋지만 video player를 버튼 하나하나 직접 구현해보겠습니다.

project

youtube
  |views
    |mixins
     +|videoPlayer.pug
    |pages
     *|videoDetail.pug
  |assets
    |scss
      |paritals
       +|videoPlayer.scss

videoPlayer.pug

videoPlayer라는 큰 div를 만들고 안에 video 및 controls관련 아이콘을 넣어주었습니다.

mixin videoPlayer(video = {})
  .videoPlayer#jsVideoPlayer
    video(src=video.src)
    .videoPlayer__controls
      .videoPlayer__column
	    span#jsVolumeButton
		  i.fas.fa-volume-up
		span
		  span#jsCurrentTime 00:00:00
		  span |
		  span#jsTotalTime 00:00:00
      .videoPlayer__column
 		span#jsPlayButton
		  i.fas.fa-play
      .videoPlayer__column
		span#jsFullScreen
		  i.fas.fa-expand

videoDetail.pug

extends layouts/main
include mixins/videoPlayer

block content
  +videoPlayer({
    src: `/${video.fileUrl}`
  })

videoPlayer.scss

• CSS trick
  동영상에 커서를 올렸을 때 control button이 활성화되는 걸 구현하기 위해서 control들의 기본 opacity값을 0으로 했구요. videoPlayer:hover일 때 control들의 opacity를 1로 바꾸어주었습니다. 나머지 부분은 이미지로 대체하겠습니다. hover일때의 이미지입니다.
  

현재 현재 시간 및 전체 재생 시간은 임의(10분)로 되어있는데요. 뒷 부분에서 실제로 시간을 받아와서 javascript로 처리해주도록하겠습니다.