[JavaScript] 자바스크립트에서 영상 로딩하기

194_자바스크립트에서 영상 로딩하기

[적용]

• 웹 사이트에 영상을 넣고 싶을 때
• 웹 사이트에 영상으로 효과를 넣고 싶을 때

---

[문법]

속성	의미	타입
src	리소스 지정	문자열
controls	컨트롤 바 표시	없음
autoplay	자동 재생	없음
loop	반복	없음
preload	영상 미리 불러오기	문자열
playsinline	인라인 재생 지정	없음

---

[내용]

video 태그를 사용해 영상을 로딩할 수 있다.

HTML에 video 요소를 배치하고, src 속성에 파일의 주소를 지정한다.

sidth와 height 속성으로 비디오의 가로, 새로 길이를 지정하며,

길이 지정이 없으면 영상의 사이즈에 맞춰 표시된다.

HTML                                                                                                                                                              index.html

<video src="영상 파일" width="가로" height="세로"></video>

 

controls 속성을 사용하여 비디오 재생, 정지 버튼을 사용할 수 있다.

HTML                                                                                                                                                              index.html

<video src="sample.mp4" width="320" height="240" controls></video>

 

영상의 자동 재생은 autoplay 속성을 사용한다.

HTML                                                                                                                                                              index.html

<video src="sample.mp4" autoplay></video>

 

영상 재생 전까지 섬네일 화면을 표시하고 싶을 때 포스터 프레임을 지정한다.

poster 속성에 이미지 파일을 지정해 사용할 수 있으며,

영상이 재생되면 포스터 프레임은 표시되지 않는다.

HTML                                                                                                                                                              index.html

<video src="sample.mp4" poster="images/poster.jpg" controls></video>

 

표시 화면 로딩 시점에 영상도 함께 불러오기 위해서는 preload 속성을 사용한다.

지정 가능한 값은 auto(자동), metadata(메타 데이터), none(자동 해제)가 있다.

video 태그는 width, height 속성이 지정되지 않으면 영상의 사이즈에 맞춰지며,

preload 속성이 metadata나 auto 중 하나라면 자동으로 사이즈를 가져온다.

속성이 none이면 재생 시작 시점에 사이즈를 가져온다.

HTML                                                                                                                                                              index.html

<video src="sample.mp4" preload="none"></video>

 

스마트폰 브라우저에서 영상의 자동 재생을 설정하고 싶을 때는 playsinline 속성과 muted 속성을 사용한다.

HTML      

<video src="sample.mp4" autoplay playsinline muted></video>

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김