<Custom Player> HTML CSS

김민석·2021년 1월 26일
0

YouTube clone

목록 보기
44/54

브라우저에서 제공하는 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로 처리해주도록하겠습니다.

profile
누구나 실수 할 수 있다고 생각합니다. 다만 저는 같은 실수를 반복하는 사람이 되고 싶지 않습니다. 같은 실수를 반복하지 않기 위해 기록하여 기억합니다.🙃

0개의 댓글