오늘은 학생들에게 HTML과 HTML5에 대해서 기본적인 개념을 소개하고 간단한 예제들 몇 개와 함께 HTML5에서 새롭게 등장한 video 요소를 이용하여 다른 플러그인 없이 동영상 파일을 재생하는 방법을 성공회대학교 강의여행 시간에 알려주었습니다.
기본적으로 video 요소에는 다양한 속성(Attribute)들이 정의되어 있는데 다음과 같이 width, height 속성을 이용하여 동영상의 크기를 설정하고 IE9를 통해 동영상을 재생할 경우에는 파일 확장자를 mp4 형태로 변환하고 Firefox, Chrome을 이용할 경우는 ogv, ogg 형태로 변환해서 다음과 같이 video 요소의 src 속성에 설정해주면 됩니다.
<!DOCTYPE HTML>
<html>
<head> <title> HTML5 Video를 이용한 동영상 플레이</title>
</head>
<body>
<h5>시애틀에서 새들과 함께</h5>
<!--video 요소와 앞서 설명한 코드가 들어가는 부분 -->
<video src="birds.theora.mp4" height="300" width="400" >
</video>
</body>
</html>
위와 같이 작성한 후 "test.html"과 같이 적당한 이름으로 저장한 후 IE9를 통해 열어보면 동영상 파일의 첫 화면이 나타나게 되는데 여기에 자동 실행(autoplay)나 컨트롤(controls) 속성들을 명시해서 동영상을 실행하게 됩니다.
'HTML 5' 카테고리의 다른 글
| "The specified CGI application encountered an error and the server terminated the process" 에러 처리 (0) | 2011.09.18 |
|---|---|
| ASP.NET의 Menu 컨트롤의 하부 메뉴가 안보일 경우 (0) | 2011.05.18 |
