h35. HTML5 비디오

HTML5 비디오

HTML5 이전에는 웹 페이지 상에서 비디오를 볼수 있는 표준이 없었습니다. 

이때는 플래시 같은 플러그-인으로 비디오를 플레이 할 수 있었습니다.

HTML5 <video> 태그는 웹 페이지에 비디오를 삽입하는 표준 방법을 제공하며, 크롬, 사파리, 파이어 폭스 및 IE9 이상의 모든 브라우저에서 <video> 태그를 완벽하게 지원합니다.

컨트롤 속성으로 비디오 컨트롤을 추가할 수 있습니다. 컨트롤에는 시작, 일시중지, 볼륨 등이 나타납니다.

가로 폭과 세로 높이를 항상 속성값으로 지정해 주는 것이 좋습니다. 그렇지 않으면 브라우저가 비디오가 로딩 될 때 깜빡 거릴 수 있습니다.

<video> 태그와 </video> 태그 사이에 입력한 텍스트는, 비디오 태그를 지원하지 않는 브라우저에서만 이 텍스트가 비디오 대신에 표시됩니다.

여러 개의 <source> 태그로 여러 개 비디오 파일을 링크할 수 있는데 이 경우 브라우저는 맨 먼저 인식할 수 있는 형식의 비디오를 사용하게 됩니다.

autoplay 속성은 데스크탑 환경에서는 동작하는데, iPad, iPhone, 안드로이드폰과 같은 모바일 환경에서는 자동 플레이 기능은 작동하지 않습니다.

비디오 형식으로 .mp4, .webm, .ogg 가 있는데, .mp4 형태로 비디오를 업로드 하는 것이 좋습니다. 

크롬, 파이어 폭스, 오페라 에서는 3가지 형식 모두를 지원하지만, 인터넷 익스플로러 및 사파리에서는 .mp4 만 지원하기 때문입니다.

---

<video controls="controls" width="360" height="240"  autoplay>
<source src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_2mb.mp4" type="video/mp4" />
현재의 브라우저가 HTML5 비디오 기능을 지원하지 않습니다.
</video>

---

[광고] Udemy 동영상 강의로 보기