[유튜브 클론코딩] 8.0 Starting the Video Player

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

            .videoPlayer__column

                span 

                    i.fas.fa-expand

↑ videoPlayer.pug

 

🍕 videoDetail.pug에서 include 해주기

extends layouts/main

include mixins/videoPlayer

block content 

    .video-detail__container

        +videoPlayer({

            src: video.fileUrl

        })

        .video__info

            if loggedUser

                if video.creator.id === loggedUser.id

                    a(href=routes.editVideo(video.id))

                        button Edit video

            h5.video__title=video.title

            p.video__description=video.description

            if video.views === 1

                span.video__views 1 view

            else 

                span.video__views #{video.views} views

        .video__author

            |Uploaded by 

            a(href=routes.userDetail(video.creator.id))=video.creator.name

        .video__comments

            if video.comments.length === 1

                span.video__comment-number 1 comment

            else

                span.video__comment-number #{video.comments.length} comments 

↑ videoDetail.pug

 

우리는 볼륨버튼, 재생버튼, 화면확장버튼을 추가한 것이다.

 

기본적인 html이 완성되었으니 이를 CSS로 꾸민다.

다음 시간에는 이것을 자바스크립트를 이용해서 제어해보겠다.