#07 HTML 강좌 동영상 넣기, 비디오 태그

안녕하세요 대남이입니다. 지난번 오디오, 음악 넣는법에 대해서 배워봤습니다. 이번에는 동영상을 웹페이지에 삽입하는 방법에 대해

알아보도록 하겠습니다. 브라우저에 영상을 삽입하시고 싶으실 때가 있으실텐데, html 태그를 이용하여 쉽게 하실 수 있습니다.

동영상 삽입태그는 <video> 입니다. 이 비디오 태그의 기본적인 구조를 알아보도록 하겠습니다.

---

비디오 태그의 기본 구조

비디오 태그의 기본적인 구조는 이와 같습니다. 처음 < video ..는 동영상 삽입 태그라는걸 나타냅니다. 

그 다음은 이제껏 많이 보셨듯이 src는 파일 소스 경로를 나타냅니다. 이때 영상의 파일명과 확장자명을 정확히 입력 해주셔야 됩니다.

autoplay는 브라우저에서 영상을 자동재생 시키는 요소입니다. 

controls은 화면에서 재상, 정지를 조절할 수 있는 제어기를 생성합니다. 비디오 태그는 이와같은 구조를 가집니다. 

그럼 autoplay , controls 같은 요소들이 있는데, 구체적으로 어떤 요소들이 있는지 알아보겠습니다.

---

비디오 태그의 요소들

속성	설명
autoplay	비디오를 자동으로 재생
controls	재생을 제어하는 제어기 표시
loop	비디오를 반복하여 재생
poster	비디오를 다운로드 중일 때 표시하는 이미지
preload	전체 오디오를 다운로드하게 함
muted	비디오의 오디오 출력을 중지
src	URL을 지정
width, height	비디오의 너비와 높이를 지정

이와 같이 정리 할 수 있습니다. 이를 이용하여 본인이 삽입하고자 하는 영상을

의도에 맞게 요소들을 사용하셔서 조절하시면 됩니다.

그럼 간단하게 영상을 넣는 코딩 예시를 보겠습니다.

src에 url을 정확히 입력하여 삽입하고자 하는 영상을 넣을 수 있습니다. autoplay를 이용하여 자동재생을 시키고

controls를 통해 제어기를 생성했습니다. 내부 스타일 시트를 이용하여 body 요소 즉, 배경을 회색을 나타냈는데,

제어기를 잘 보이게 하기위해 지정했습니다. <video> 와 </video> 태그 사이 텍스트는 브라우저가 영상을 출력하지 못했을 때

나타내는 텍스트입니다. 그럼 브라우저에 어떻게 출력되는지 살펴보도록 하겠습니다.

다음과 같이 브라우저에 출력되게 됩니다. 제어기 위에는 본인이 넣은 영상이 재생됩니다.

그리고 앞서 봤던 width, height 요소를 이용하여 본인이 표시하고자하는 크기만큼 넣을 수 있습니다.

예시로 너비 500px, 높이 300px로 조정해보겠습니다.

이렇게 비디오 태그에 width 와 heigth 요소를 넣어주시면 됩니다.

다음과 같이 설정하면 너비 500픽셀, 높이 350픽셀이 됩니다. 그러면 브라우저에는 다음과 같이 출력됩니다.

이와 같이 본인이 원하는 크기대로 출력할 수 있습니다.

---

여기서, 영상 파일의 출력을 실패할 때가 있습니다. 그때는 비디오 형식, 즉 확장자와 관련이 있습니다.

웹 브라우저마다 지원가능한 확장자가 다르기 때문에 발생하는 문제입니다.

비디오의 확장자는 크게 mp4 ,webM, ogg가 있는데, 웹 브라우저마다 지원하는 확장자를 밑에 정리해 보았습니다.

브라우저	MP4	WebM	Ogg
인터넷 익스플로러	O	X	X
크롬	O	O	O
파이어폭스	X	O	O
사파리	O	X	X
오페라	X	O	O

다음과 같이 정리할 수 있습니다. 앞서 알아본 것들을 이용하여 본인들이 넣고자 하는 영상을

의도에 따라 알맞게 잘 나타내시면 됩니다.

-

오늘은 비디오태그에 대해서 알아봤습니다. 도움이 되셨는지 모르겠습니다.

다음번에는 좀 더 유익한 정보와 좋은 강좌로 돌아오겠습니다. 감사합니다.