반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

HTML5로 비디오 보여주기 Video Tag

2011. 12. 16. 09:45 | Posted by 솔웅


그동안 주로 CSS3 (Webkit 중심으로) 를 다뤘구요. 지난 글에서 자바스크립트를 잠깐 다뤘었습니다.
지금까지 주요한 부분은 바로 Webkit입니다. 지금 진행중인 글 어느정도 마무리 되면 Webkit은 따로 다룰 필요가 있는 주제 같습니다.
그리고 오늘부터 다룰 부분은 본격적인 HTML5 입니다.

오늘은 브라우저에서 HTML5로 비디오를 어떻게 실행하는지 또 비디오 플레이어는 어떻게 구성하는지에 대해 시작하겠습니다.

먼저 사용할 동영상 파일은 각자 준비해 주세요. 파일 형식은 mp4 입니다.
저는 유튜브에서 뮤직비디오 하나 다운 받아서 사용할 겁니다.

아래와 같이 html 파일을 만드세요.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
</head>
<body style="background-color:#8EE5EE;">
    <div id="big_wrapper">
        <video src="song.mp4"> </video>
    </div>
</body>
</html>

제 동영상 파일은 이름이 song.mp4 입니다.

크롬 브라우저에서 실행하면 위와 같이 나옵니다.
동영상이 play되지도 않고 어디 play버튼이나 stop 버튼 뭐 이런게 하나도 없습니다.
video 태그를 아래와 같이 고쳐 보세요.
<video src="song.mp4" controls > </video>


그냥 video 태그에 controls만 넣었는데 플레이버튼, 정지버튼,진행상황 bar 그리고 볼륨조절까지 다 나오네요.

video tag 안에 width와 height도 넣을 수 있습니다. 그러면 동영상 사이즈가 변할 겁니다.
이 video tag 안에 넣을 수 있는 속성들은 아래와 같은 것들이 있습니다.

다 보시면 아실 겁니다.
아래와 같이 video 태그를 바꿔보세요.
<video src="song.mp4" controls width="640" height="360" loop poster="video05.png"> </video>
너비, 높이를 지정했고 루프를 선언했고 poster에 한 이미지를 지정했습니다.
(저는 HTML5 로고를 사용했습니다.)

그러면 처음 실행될 때 poster에서 지정된 이미지가 나타나고 재생 버튼을 누르면 동영상이 시작됩니다.
여기에 autoplay를 추가하면 자동으로 동영상이 시작되겠죠?
여러분들이 필요한 속성을 사용하시면 됩니다.
반응형

Comment