[HTML5] HTML5 기초 : video, audio 삽입
예전에 난장세미나에서 들었었던 코덱에 대한 이야기는 내용도 길고 하니 언급 안하겠습니다.
그래도 간단히 알고 가야 되는 내용이라면 파이어폭스와 오페라는 테오라코덱(무료 : ogg형식)을 지원하고 나머지는H.264(유료, HTML5 동영상 재생 용도로는 무료 : mp4형식)를 지원하는 것만 일단 알고 계시면 됩니다. 단 크롭은 둘다 지원하고 있습니다. 그리고 구글이 오픈 소스로 공개한 VP8이 있습니다.
src
- 동영상 파일의 경로를 지정
poster
- 동영상이 화면에 나타나지 않을 때 대신 표시할 그림을 지정
preload
- 동영상이 백그라운드에서 다운로드되어 재생 단추를 눌렀을 때 재생
: 위 내용은 간단히 말하면 사용자가 동영상을 재생하기 전에 내 컴퓨터에 다운을 시킬것인지 말것인지를 정하는 부분입니다.
autoplay
- 동영상을 자동 재생
loop
- 반복 재생 횟수를 지정
controls
- 컨트롤 막대를 추가
width, height
- 넓이, 높이
HTML 5로 어떻게 <video>를 삽입해야 하는가?
<video width="300" height="300" autoplay controls poster="astralps.gif">
<source type="video/mp4" src="astralps.mp4">
<source type='video/ogg: codecw="theora, vorbis"' src="astralps.ogv">
</video>
넵 이렇게 하시면 됩니다.
그러면 처음에 이야기한 테오라와 H.264를 지원하는 모두의 브라우저에서 동영상을 출력할 수있습니다.
그런데 문제는 이런 젝일슨 같은 ie가 우리를 기다리고 있지요..-ㅅ-);
HTML5를 지원하지 않는 ie브라우저를 위해 우리는 뭔가를 또 해줘야 합니다.
(물론 아주 좋은 플러그인이나 스크립트를 심었다면 굳이 위처럼 쓰지 않아도 잘 해결해 주겠지만 아직 잘 모르겠음.)
<video width="300" height="300" autoplay controls poster="astralps.gif">
<source type="video/mp4" src="astralps.mp4">
<source type='video/ogg: codecw="theora, vorbis"' src="astralps.ogv">
<!--[if lt IE 9]>
<object width="300" height="300" type="application/x-shockwave-flash" data="astral.swf">
<param name="movie" value="astral.swf" />
<param name="flashvars" value="controlbar=over&image=astral.gif&file=astral.mp4" />
<img src="astralps.gif" width="300" height="300" alt="동영상따윈 나오지 않으니 이미지를 봐라" />
</object>
<![endif]-->
</video>
ie8 이하로는 아도비 플래시를 이용하라고 컨티셔널 코맨드를 작성해보았고 따로 스크립트가 필요하지 않는 상황입니다.
물론 이런 방법 말고 많을테니 다양한 의견들 주시길...
... video와 같음...'ㅡ');
<audio autoplay controls>
<source src="astralps.ogg">
<source src="astralps.mp3">
</audio>
파이어 폭스의 경우 <source>태그 버그가 있어서 ogg를 먼저 선언해 줘야 한다고 합니다.
그런데...쓰다보니 웃긴게 생각났는데
하나의 동영상을 웹에서 보여주기 위해서 최소한 두개이상의 파일로 올려야 한다는 것 자체가 안습임...-ㅅ-);
좀 찾아보면 깔쌈한 플러그인이나 스크립트가 있겠지요...__)a;
*HTML5+CSS3 외 참고
- KOREA HTML5 Group
- VIDEO ON THE WEB
- Video for Everybody!
댓글
댓글 쓰기