Video / Audio의 기본적인 사용방법 HTML5



Video / Audio의 기본적인 사용방법

 

 

앞서 말한대로 비디오 및 오디오의 출력방법은 매우 간단하다.

필요한 태그 한줄만 적어줘도, 해당 기능을 사용할 수 있기 때문이다.

 

다시 한번 비디오를 출력하는 예제를 보자.

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 Test </TITLE>
</HEAD>
<BODY>
 <video id="myVideo" controls src="http://double.co.nz/video_test/BillysBrowser480.ogg">
  이 페이지가 보이지 않는다면, 당신은 구형 브라우저를 사용중입니다.
 </video>
</BODY>
</HTML>

 

빨간색을 사용해서 눈이 좀 아픈것 같다 -_-;

앞장에서의 예제와 좀 다르다. 눈을 아프게 하는 빨간글씨 부분이 추가되었기 때문인데,

빨리 설명해야겠다. 눈이 아프다.

 

말그대로 화면상에 제어가능한 UI를 보여주겠다는 controls 속성과 함께

<video></video>태그 사이에 한글로 블라블라 적어주었다.

 

해당 태그를 지원하지 못하는 브라우저에서는 블라블라 메시지가 출력될것이다. 확인해볼까?

 

 

앞서 예제를 실행했던 불여우 브라우저의 실행화면이다.

마치 유투브의 그것처럼 제어가능한 컨트롤들이 화면상에 (온마우스 되었을때) 출력됨을 볼 수 있다.

그럼 우리의 골칫덩어리 IE는 어떠할까?

 

 

IE8은 어떠할지 모르겠지만, 위에 보이는 화면은 IE7로 실행해본 화면이다.

블라블라 메시지가 출력되고 있다.

 

자! 그럼 이제 화면크기좀 조정해보자.

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 Test </TITLE>
</HEAD>
<BODY>
 <video id="myVideo"
  width="400" height="300"
  controls src="http://double.co.nz/video_test/BillysBrowser480.ogg">
  이 페이지가 보이지 않는다면, 당신은 구형 브라우저를 사용중입니다.
 </video>
</BODY>
</HTML>

 

앜. 또다시 빨간글씨가 등장했다.

모 설명할것도 없지 않은가...? 캡처를 찍긴 했는데, 보여드리자니 창피하다;

 

대신! 한가지 짚고 넘어가야 할것이 있다.

그것은 바로!!

 

동영상 프레임이 다운로드 될때까지 표시해줄 이미지를 지정해주는 속성이다.

음. 해볼만 하겠는데? 코드를 보자.

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 Test </TITLE>
</HEAD>
<BODY>
 <video id="myVideo"
  width="400" height="300"
  poster="http://desmond.yfrog.com/Himg29/scaled.php?tn=0&server=29&filename=r16t.jpg&xsize=640&ysize=640"
  controls src="http://double.co.nz/video_test/BillysBrowser480.ogg">
  이 페이지가 보이지 않는다면, 당신은 구형 브라우저를 사용중입니다.
 </video>
</BODY>
</HTML>

 

poster 라는 속성이 보인다. 옆에 URL도 보인다.

동영상이 로딩되기 전까지는 옆의 URL에 있는 이미지를 보여주란 말인가보다. 결과를 보자.

 

 

동영상이 로딩되기 전까지 쌀집자전거의 이미지가 화면을 대신하고 있는 모습이다.

예를 들어, 회사에서 사용할때에 회사의 로고 등을 보여주면 좋을 것 같다는 생각이 문뜩 들었다.

 

쌀집자전거는 언제봐도 정겹다.

우리 할아버지는 가게앞에 저걸 세워두었다가, 어뜬놈이 훔쳐서 달아났다지? 나쁜놈!!!


덧글

댓글 입력 영역


통계 위젯 (화이트)

1522
132
358625

red 210