Video

✅ Video

• HTML5부터 새롭게 추가된 API
• <video> 태그는 동영상 데이터를 다룬다.
• <video> 태그에는 아래와 같은 속성(attribute)이 있다.

<video src="비디오파일명.mp4" poster="이미지명.png" autoplay loop><video>

// src : 재생할 미디어의 url
// poster : 동영상 대표 이미지 url
// autoplay : 해당 속성이 설정되어 있으면, 사용자 입력값이 없어도 동영상을 자동으로 재생
// loop : 해당 속성이 설정되어 있으면, 동영상을 계속 반복

---

🐥 src 속성
❗ 모든 브라우저에서 동영상을 지원하려면 src 속성을 아래와 같이 설정

<video>
   <source src="video/gizmo.mp4" type="video/mp4" />
   <source src="video/gizmo.webm" type="video/webm" />
   <source src="video/gizmo.ogv" type="video/ogg" />
   video 요소를 지원하지 않는 브라우저입니다. 동영상은 <a href="pics/video/gizmo.mp4">다운로드</a> 후 볼 수 있습니다
</video>

---

🐥 poster 속성
<video> 태그는 재생 대기 상태의 첫 화면을 표시할 때 미디어 파일의 첫 프레임을 대표 이미지로 가정한다.
하지만, 모든 미디어의 첫 프레임이 그 동영상을 대표하는 것은 아니다. 예컨대, 어떤 동영상은 페이드-인(Fade-in)으로 시작하기 때문에 첫 장면이 그냥 새까만 화면일 수도 있다.
이런 문제때문에 HTML5 <video> 에서는 poster 속성을 통해 아직 재생 대기중인 동영상의 대표 이미지를 설정할 수 있도록 했다.

---

🐸 프로퍼티(Properties)

'자바스크립트에서 접근하고 사용할 수 있는 값'을 말한다. 즉 읽기 전용이라는 뜻이다.

💡 HTML5 video 태그의 프로퍼티

프로퍼티	형식	설명
currentSrc	문자열	현재 재생중인 미디어의 URL
duration	숫자	미디어의 재생 길이. 미디어 데이터가 없다면 NaN을 반환
currentTime	숫자	재생 중인 미디어의 현재 위치
loop	Boolean	미디어의 반복 재생 여부
paused	Boolean	미디어 재생 일시 정지 여부
played	TimeRanges	현재 재생중인 미디어의 URL
defaultPlaybackRate	숫자	기본 미디어 재생 속도 배속. 기본값은 1.0으로 원래의 속도대로 재생
ended	Boolean	재생이 종료됐는지의 여부
initialTime	숫자	초기 재생 위치. 초 단위 숫자로 표현
muted	Boolean	음소거 여부
networkState	숫자	네트워크 상태를 나타내는 0부터 3까지의 정수
poster	문자열	video 요소의 poster 속성
src	문자열	video 요소의 src 속성
playbackRate	숫자	미디어 재생 속도 배속. 기본값은 1.0으로 원래의 속도대로 재생한다. 이 속성을 조절하면 빨리 감기나 슬로우 모션 기능을 구현할 수 있다
preload	문자열	video 요소의 preload 속성
readyState	숫자	video 요소의 준비 상태. 0~3까지의 숫자값을 가진다
videoHeight	숫자	동영상 원본의 높이
videoWidth	숫자	동영상 원본의 너비
width	숫자	video 요소의 width 속성
volume	숫자	0.0(음소거)부터 1.0(최대)까지의 실수로 표현하는 볼륨 크기

🐸 메소드(Methods)

프로퍼티	설명
play()	미디어를 재생한다
pause()	미디어 재생을 일시중지 한다