Firefox 3.1가 HTML5의 <video>와 <audio>태그를 지원합니다. 마음에 쏙드는 이 멋진 글은 Mozilla 개발자 포털에 막 올라온 정보입니다. Firefox 3.1은 현재 Ogg 포맷을 지원하고 있지만, 다른 포맷들에 대한 지원도 검토중이라고 합니다.
문서에 있는 사용 예제입니다.
미디어 재생은 자바스크립트로 컨트롤 될 수 있습니다.
from Firefox 3.1 to support HTML 5 video and audio
문서에 있는 사용 예제입니다.
[code:html]
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay>
Your browser does not support the <code>video</code> element.
</video>
참 쉽죠? 다른 형식의 여러 원본을 정할 수도 있습니다.<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay>
Your browser does not support the <code>video</code> element.
</video>
[code:html]
<video autoplay>
<source src="foo.ogg" type="video/ogg"></source>
<source src="foo.mov"></source>
Your browser does not support the <code>video</code> element.
</video>
주의할 것은 아직 source 엘리먼트가 완전히 지원되는 것은 아니라는 점입니다.<video autoplay>
<source src="foo.ogg" type="video/ogg"></source>
<source src="foo.mov"></source>
Your browser does not support the <code>video</code> element.
</video>
미디어 재생은 자바스크립트로 컨트롤 될 수 있습니다.
[code:js]
var v = document.getElementsByTagName("video")[0];
v.play();
사용할 수 있는 이벤트가 상당히 많아서(22개나 있습니다!), 서로 다른 미디어 이벤트에 기반해서 어떤 동작을 붙이거나 UI를 업데이트 할 수 있습니다.var v = document.getElementsByTagName("video")[0];
v.play();
[code:js]
var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;
이 코드는 탐색이 일어나면 작동합니다.var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;
from Firefox 3.1 to support HTML 5 video and audio
'[IT] Web Tech' 카테고리의 다른 글
| isArray : 배열인지 바로 알기가 왜 이리 어렵죠? (3) | 2009.01.13 |
|---|---|
| 자바스크립트 그래프 작성 도구 (1) | 2008.11.10 |
| IE에 WebKit이 적용된다? (1) | 2008.11.10 |
| 50개 이상의 Ajax 예제들 (0) | 2008.11.05 |
| Firefox 3.1에서 HTML 5의 <video>와 <audio> 태그 지원 (0) | 2008.10.28 |
| Typeface.js : 원하는 폰트를 웹에 표시하는 또 다른 방법 (1) | 2008.10.28 |
| CSSHttpRequest: CSS를 이용한 크로스 도메인 Ajax (0) | 2008.10.27 |
| WysiHat: 37 Signals의 새 오픈소스 WYSIWYG 에디터 (0) | 2008.10.27 |
| Chrome에 Grease Monkey가! Userscripts가 곧 가능해질까? (0) | 2008.10.27 |
댓글을 달아 주세요