요구사항
- Start를 누르면 video가 실행된다.
- video에 마우스를 대는 이벤트가 실행되면 시간초가 카운트되고, 동영상이 실행된다.
- 마우스를 떼면 시간초 카운트와 동영상이 멈춘다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="app">
<button class="startApp">Start</button>
</div>
<script>
const app = document.querySelector('.app')
const getMinutesAndSeconds = (vEle) => {
let seconds = Math.floor(vEle.currentTime)
const min = Math.floor(seconds / 60)
seconds = seconds % 60
seconds = `${seconds}`
if (seconds.length < 2) {
seconds = `0{seconds}`
}
return `${min}:${seconds}`
} // 시간초를 텍스트로 만드는 함수
const startApp = () => {
app.innerHTML = `
<h1 class="display">0:00</h1>
<video src="https://songz.c0d3.com/js4/examples/ankurBunny.mp4" class="video"></video>
`
// app이라는 div에 innerHTML 요소를 뿌려줌.
const videoElement = document.querySelector('.video')
const displayElement = document.querySelector('.display')
videoElement.addEventListener('timeupdate', () => {
displayElement.innerText = getMinutesAndSeconds(videoElement)
// 비디오의 실행시간이 업데이트되면 시간초가 나옴.
})
videoElement.addEventListener('mouseenter', () => {
videoElement.play()
// 마우스를 비디오에 올리면 시작됨
})
videoElement.addEventListener('mouseleave', () => {
videoElement.pause()
// 마우스를 비디오에서 떼면 정지됨
})
}
// startApp이 발동되면
// app에 innerHTML로 여러 요소들이 생기며
// DOM이 따지고, 각 종 이벤트가 생김 ( 즉 모든 요소를 뿌려주는 녀석임 )
const startButton = document.querySelector('.startApp')
startButton.addEventListener('click', startApp)
</script>
</body>
</html>
여기서 공부할 수 있는 것은
media element의 timeupdate 이벤트와 currentTime 프로퍼티 이다.
timeupdate는 video나 audio 엘리먼트가 진행될때마다 실행되는 이벤트이며,
currentTime은 진행시간을 초 단위로 보여준다.
(엘리먼트의 프로퍼티도 굉장히 많고 이벤트 종류도 굉장히 많다라는 것을 알아가자.)
'Javascript' 카테고리의 다른 글
| [생성자 함수] 클릭하면 움직이는 원(circle) 만들기 (0) | 2022.12.05 |
|---|---|
| [클래스] 클래스를 왜 배우는가? (0) | 2022.11.26 |
| Pokemon viewer (프로미스 연습) 코드리뷰 (0) | 2022.10.31 |
| 이벤트 연습 / 마우스 좌표 찍기, input + keyup 이벤트 (3) | 2022.10.25 |
| 이벤트 드리븐 프로그래밍 / 자주 쓰는 이벤트 타입 (0) | 2022.10.25 |
