Audio Element 도 HTML 5 에서 관심이 주목되고 있는 새롭게 추가된 element 들 중 하나죠.

Audio Element 도 video Element 와 그 사용법은 다르지 않습니다.
큰 차이점이라면... Poster 속성이 없다는 것!!! 입니다.

그럼 기본적인 사용방법을 살펴보겠습니다.

<audio src="http://www.w3schools.com/html5/horse.ogg"></audio>

그럼 여기에...
audio file 을 자동적으로 재생시키려면...

<audio src="http://www.w3schools.com/html5/horse.ogg" autoplay></audio>
또는
<audio src="http://www.w3schools.com/html5/horse.ogg" autoplay="autoplay"></audio>

이렇게 하면 되겠습니다.

Audio Element 도 Video Element 처럼 Web Browser 가 Audio Element 를 지원하느냐에 따라 실행여부를 알 수 있는데..
Web Browser 가 Audio Element 를 지원하지 않을 때 특정 문구를 표시할 수 있도록 지원 시킬수 있습니다.

<audio src="http://www.w3schools.com/html5/horse.ogg" autoplay>
<p>Your browser does not support audio tag</p>
</audio>

Audio Element 도 Vedio Element 와 같이 재생 control 을 표시할 수 있습니다.

<audio src="http://www.w3schools.com/html5/horse.ogg" controls></audio>
또는
<audio src="http://www.w3schools.com/html5/horse.ogg" controls="controls"></audio>


다음은 Audio Element 가 사용할 수 있는 속성들을 소개하겠습니다.

 속성명 값  기능 
 src  파일 경로  Source
 autoplay  autoplay  페이지가 Load 되자마자 사운드를 재생할지를 지정합니다.
 controls  controls  플레이어를 표시합니다.
 loop  재생횟수  audio 를 반복 재생할 횟수를 지정합니다.
 preload  none, auto, meta  Page 가 열리면 audio 를 미리 Load 합니다. 

음... 이번엔 audio Element 가 지원하는 Audio 코덱들을 살펴보도록 하겠습니다.
   IE FireFox  Opera Chrome  Safari  
 Vorbis(oga, ogg)  X  O  O  O  X
 wav, wma  O  O  O  X  O
 mp3  O  X  X  O  O
 AAC  O  X  X  O  O


마지막으로 Control 의 모양을 한번 보도록 하죠...

<audio controls="controls" id="ado">
  <source src="
http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.mp3"/>
  <source src="
http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.ogg"/>
  <source src="
http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.wav"/>
  <p>Your browser does not support the audio tag.</p>
</audio>




Video 의 Control 모양과 다르지 않죠? ^^


오늘은 간단히 audio Element 에 대해서 살펴보았습니다.

다음은 가장? 관심이 많으실 Canvas Element 에 대해서 알아보도록 하죠...

그럼 행복한 고수되셔요..


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 11. Drag & Drop API  (0) 2011.06.18
[HTML 5] 10. Canvas Element  (2) 2011.06.18
[HTML 5] 8. Video Element  (3) 2011.06.10
[HTML 5] 7. Rich Text Edit API  (0) 2011.06.08
[HTML 5] 6. Strong Web Form  (0) 2011.06.05

Video Element 는 HTML 5 에서 관심이 주목되고 있는 새롭게 추가된 element 들 중 하나입니다. 
지금까지 웹페이지에 동영상을 삽입하고 싶을때는 object Element 나 Embed Element 를 사용하여 Flash, media player 와 같은 플러그인을 이용하여야 했습니다.
그러나, 이제 HTML 5 에서는 플러그인없이도 동영상을 웹페이지에 쉽게 삽입할 수 있습니다.
그리고, 다음과 같이 object, embed Element 와는 다른 점이 있습니다.

  • 재생, 일시중지 등 Web Browser 자체 Control 이 있습니다.
  • Source 에 파일을 여러개를 지정할 수 있어서 Web Browser 의 지원 Format 에 따라 표시 할 수 있습니다. 

<!DOCTYPE HTML>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>HTML 5 Video 예제</title>
  </head>
  <body>
    <video width="320" height="240" controls="controls">
      <source src="
http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
      <source src="
http://www.w3schools.com/html5/movie.webm" type="video/webm" />
      <source src="
http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
      <p>Your browser does not support the video tag.</p>
    </video>
  </body>
</html>

rowser 별 지원 비디오 코덱을 위 Markup 을 바탕으로 아래 표에 간략히 정리해 보았습니다.
   IE 9 FireFox 3.6.17 Opera 11.11 Chrome 12.0.742 Safari 5.0.5
 Ogg  X  O  O  O  X
 MPEG 4  O  X  X  O   O 
 WebM  △  X  O  O  X
(IE 10 beta 는 아직 설치를 안해봤으므로 설치하고 업데이트 하겠습니다. ㅡㅡ')

IE 9 에다가 WebM 란에는 "△" 표시를 했는데 이유는요...
기본적으루다가 지원을 하는 것이 아니고...
코난님께서도 소개해주신바 있는 글인데요..
http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx
를 확인해 보시면 알 수 있듯이...

webM Componenent 를 설치하시고 Refresh 를 하셔야 보실 수 있을 겁니다.
^^
아래 이미지는 설치 과정입니다.

 

그 해당싸이트는 위와같이 접근 할 수도 있습니다.
http://ie.microsoft.com/testdrive/


클릭해보면.. 아래 페이지로 이동합니다.

다시 다운 받을수 있는 곳으로 이동을 합니다.

확인하시고요...

설치가 다 끝났나 봅니다.


아... 인제 보이네요... ^^



그럼 이번에는 각 Web Browser 마다 제공하는 기본 Control 의 모양을 살펴보죠.


IE 의 모양입니다.


FireFox 의 모양입니다.


Safari 의 모양입니다.


각 Web Browser 마다 특색이 나타나는 것을 확인해 볼 수 있습니다.


이제 Video Element 를 사용하는 방법을 알아보도록 하겠습니다.

<video src="sqler.mp4"  loop="loop">
<p>이 문장이 보인다면 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
</video>

속성 설명 
 controls  재생 Control 표시를 제어합니다.
 autoplay  동영상이 Loading 되면 곧바로 재생을 시작합니다.
 autobuffer  이 속성을 사용하게 되면 사용하기 전부터 다운로드가 진행됩니다. 사용자가 재생할 때쯤이면 동영상이 어느 정도 다운로드가 된 상태일 것입니다. 
 poster  동영상이 Download 중이거나 Buffering 중에 나타낼 이미지를 지정합니다.
 loop  동영상을 반복 재생합니다.
 width  동영상의 너비를 지정합니다.
 height  동영상의 높이를 지정합니다.

하지만, Web Browser 마다 지원하는 동영상이 다르므로 아래 Markup 처럼 둘 이상의 여러 포맷을 준비해 두어 Source Element 를 이용하여 모든 Web Browser 에서 재생가능하도록 해야할 것입니다.

<video controls=controls poster="image/poster/sqler.png">
<source src="media/video/sqler.ogg" type="video/ogg">
<source src="media/video/sqler.mp4" type="video/mp4">
<object data="media/video/sqler.mov">

<p>이 문장이 보인다면 HTML 5 의 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
</object>
</video>


이런 Video Element 는 javascript 를 사용하여 자유롭게 동영상을 조작할 수 있습니다.
너무 간단하긴 하지만 아래와 같은 arkup 으로 Web Browser 가 제공하는 Control 이 아닌 사용자가 직접 제작할 수 있는 Control 을 제작해 보았습니다.
<video id="vdo" src="media/video/sqler.ogg" poster="image/poster/sqler.png">
<p>이 문장이 보인다면 HTML 5 의 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
</video>
<p>
<button onclick="document.getElementById('vdo').pause()">Pause</button>
<button onclick="document.getElementById('vdo').play()">Play</button>
<button onclick="document.getElementById('vdo').currentTime = 0">|<</button>
<button onclick="document.getElementById('vdo').currentTime += 5">>></button>
</p>
<script>
var vdo = document.getElementById('vdo');
if(vdo != null && vdo.addEventListener)
{
 vdo.addEventListener(
'ended',
function() {
 alert('The video has ended.');
},
false);
}
</script>


아래와 같이 외부 Control 을 확인하실수 있습니다.


이 상으로 간단하게 Video Element 를 사용하는 방법에 대해서 간단하게 살펴보았습니다.
동영상 조작을 위한 외부 Contorl 들을 제작하기에도 그리 어렵지 않을 것이라는 생각이 드네요...
그런 생각은 정작 만들면 사라질 수도 있겠지만 말입니다.

다음은 Audio Element 에 대해서 살펴보기로 하겠습니다.


행복한 고수되셔요...

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


PS) www.w3schools.com 사이트를 추가적으로 참조하였음을 말씀드립니다.
반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 10. Canvas Element  (2) 2011.06.18
[HTML 5] 9. Audio Element  (0) 2011.06.14
[HTML 5] 7. Rich Text Edit API  (0) 2011.06.08
[HTML 5] 6. Strong Web Form  (0) 2011.06.05
[HTML 5] 5. Sementic Element (2)  (1) 2011.06.01

이번엔 사용자들이 쉽게 웹페이지를 편집할 수 있게하는 Editing API 에 대해서 살펴보도록 하겠습니다.

기존엔 웹페이지에 Editor 를 구현하기위해서 각 업체별로, 개발자별로 Javascript 를 사용하여 각자의 방법으로 개발하였습니다. 하지만, HTML 5 에서부터는 Rich Text 를 편집하기위한 API 가 표준으로 규정되어 있습니다. 그리고 추가적으로 DesignMode thrtjd과 Global 속성인 Contenteditable 속성이 포함되어 있습니다.

5-1. Contenteditable 과 designMode

contenteditable 속성과 designMode 속성은 모두 내용편집이 불가능한 요소를 편집가능하도록 하기위한 API 로, 차이점은
contenteditable 속성은 특정 Element 의 내용을, designMode 속성은 문서 전체를 편집할 수 있게 합니다.

<div id="editor" contenteditable="true"></div>
또는
<div id="editor" contenteditable></div> <!--true 값은 생략가능-->


contenteditable 속성의 값은 세가지를 가질 수 있습니다.
   의미
 true  편집가능
 false  편집불가
 inherit  부모요소로부터 상속

contenteditable 속성값이 true 인 요소의 자식 요소들은 기본적으로 true 값을 가집니다.
하지만 아래와 같이 명시적으로 contenteditable 값을 false 로 지정한다면 편집할 수 없습니다. (하지만 부모 div Element 의 contenteditable 의 속성이 true 이므로 그 자식element 인 두번째 div 를 삭제할 수는 있을 것입니다.)

<div id="editor" contenteditable="true">
    <div>편집 가능</div>
    <div contenteditable="false">편집불가</div>
</div>

(참고 : 웹혁명을 꿈꾸다 HTML 5 & API 입문)


위 이미지를 보면 상단 Web Browser 가 ie9 이고 아래는 Opera 인데요...
ie9 은 편집불가인 부분도 편집이 되는 문제가 있군요... opera 는 편집불가인 부분은 편집되지 않았습니다.

그리고 이렇게 지정한 contenteditable 의 속성값은 아래와 같이 javascirpt 를 이용하여 해당 Element 의 isContentEditable 속성에 접근할 수 있습니다.

var  editor = document.getElementById("editor");
var isEditable = editor.isContentEditable


designMode 속성을 사용하면 문서 전체를 편집할 수 있습니다.
designMode 속성은 document 객체가 갖는 속성으로 "on", "off" 값을 갖습니다. 문서 뿐만이 아니라 iframe 의 contentDocument 속성에 사용하게되면 iframe 내의 내용 또한 편집할 수 있습니다.

<iframe src="about:blank" width="300" height="300" onload="this.contentDocument.designMode='on'"></iframe>


5-2. Rich Text Edit API
위에서 언급한 contenteditable 속성 이나 designMode 속성을 편집모드로 설정한 상태에서 editing API 를 사용하면 편집내용을 Rich Text 로 다룰 수 있습니다.
이때 사용하는 것이 execCommand API 입니다.

이제 execCommand 를 살펴보도록 하겠습니다.
document 객체에서 사용할 수있는 함수로 commandId, showUI, value 세가지의 Parameter를 갖습니다.
이 중 첫번째 Parameter 이외에는 생략할 수 있지만 Command Id 에 따라 값을 지정하여 호출합니다.

document . execCommand(commandId [, showUI [, value ] ] )

이 때, Command ID 로 사용되는 명령어들은 다음과 같은 것들이 있습니다. 이 들을 간단히 살펴보겠습니다.
 CommandID 설명 
 bold  선택한 문자열을 굵은 글씨로 전환합니다.
 createLink  선택한 문자열을 하이퍼링크로 전환합니다.
 delete  선택한 문자열이나 커서 앞의 문자를 삭제합니다.
 formatBlock  선택한 문자열을 지정한 Tag로 감쌉니다.
 forwardDelete  선택한 문자열이나 커서 뒤의 문자를 삭제합니다.
 insertImage  커서가 위치한 곳에 이미지를 삽입합니다.
 insertHTML  문자를 커서가 위치한 곳에 HTML 형태로 삽입합니다.
 insertLineBreak  커서의 위치에 줄바꿈을 삽입합니다.
 insertOrderedList  커서의 위치에 순서있는 리스트(ol tag)를 삽입합니다.
 insertUnorderedList  커서의 위치에 순서없는 리스트(ul tag)를 삽입합니다.
 insertParagraph  커서의 위치에 Paragraph (p tag 나 div tag : Browser 마다 구현은 각각 다름) 를 삽입합니다.
 insertText  커서의 위치에 문자를 삽입합니다.
 italic  선택한 문자열을 italic 체로 전환합니다.
 redo  undo 를 재실행합니다.
 selectAll  편집가능한 컨텐츠를 모두 선택합니다.
 subscript  선택한 문자열을 아랫첨자로 전환합니다.
 superscript  선택한 문자열을 윗첨자로 전환합니다.
 undo  실행을 취소합니다.
 unlink  선택한 문자열에 적용된 하이퍼링크를 제거합니다.
 unselect  선택을 취소합니다.
 VendorID-customCommandID  Browser 제작사들 마다의 명령어를 지정하여 호출합니다.

execCommand함수 이외에도 다섯가지의 함수가 더 존재하는데 이 함수들을 이용하면 WYSIWYG Editor 를 만들 수 있을 것입니다.
그럼, execCommand 함수 이외의 다섯가지 함수에 대해서 살펴보도록 하겠습니다.

 함수명 설명 
 document.queryCommandEnabled(commandId)  지정한 명령어(commandId)가 실행가능한지 여부를 반환합니다. 현재 커서의 위치에서 실행가능 여부를 알 수 있습니다.
 document.queryCommandIndeterm(commandId)  지정한 명령어(commandId)의 효과가 일정한가 여부를 반환합니다.
 document.queryCommandState(commandId)  지정한 명령어(commandId)의 상태를 반환합니다. 현재 커서의 위치에서 실행가능 여부를 알 수 있습니다.
 document.queryCommandSupported(commandId)  지정한 명령어(commandId)가 지원되는지 여부를 반환합니다.
 document.queryCommandValue(commandId)  지정한 명령어(commandId)의 현재값을 반환합니다.

위 함수들과 commandid 들을 사용하면 쉽게? Editor 를 구현할 수 있겠네요...
하지만 HTML 4와 다른 점이 무엇이 있을까요? HTML 4 에서는 구현하지 못했던 것들이었을까요?
여러분들도 아시겠지만 그렇지 않습니다.
지금까지 많은 Web 개발자들이 제작하고, 또 사용하고 있는 WYSIWYG Editor 들을 보면 알 수 있듯이 예전 부터 만들어 왔고, 계속 사용되어져 왔습니다.
하지만, HTML 5 로 넘어오면서 달라진 점이라고 한다면 표준화하여 API 를 작성하고 통일된 사양아래서 개발할 수 있도록 하였다는데 주목해야 할 것입니다.


Editor 를 제작하면 더 좋았을 듯 하지만 그 내용은 추후에 추가해 보도록 하겠습니다.
(제일 짧은 글이네요... 성의없어 보이는 것은... ㄷㄷㄷ ㅡㅡ'


행복한 고수되십시요.


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\



반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 9. Audio Element  (0) 2011.06.14
[HTML 5] 8. Video Element  (3) 2011.06.10
[HTML 5] 6. Strong Web Form  (0) 2011.06.05
[HTML 5] 5. Sementic Element (2)  (1) 2011.06.01
[HTML 5] 4. Sementic Element (1)  (0) 2011.05.29

+ Recent posts