브라우저에서 제공하는 video 탬플릿을 사용해도 좋지만 video player를 버튼 하나하나 직접 구현해보겠습니다.
youtube
|views
|mixins
+|videoPlayer.pug
|pages
*|videoDetail.pug
|assets
|scss
|paritals
+|videoPlayer.scss
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
extends layouts/main
include mixins/videoPlayer
block content
+videoPlayer({
src: `/${video.fileUrl}`
})
현재 현재 시간 및 전체 재생 시간은 임의(10분)로 되어있는데요. 뒷 부분에서 실제로 시간을 받아와서 javascript로 처리해주도록하겠습니다.