ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

[HTML5] Video & Audio
8³â Àü
¸ÖƼ¹Ìµð¾î Áö¿ø
HTML 5 ¸¦ Áö¿øÇÏ´Â ºê¶ó¿ìÀú´Â ºñµð¿À, ¿Àµð¿À¿Í °°Àº ¸ÖƼ¹Ìµð¾î Çü½ÄÀ» ÀÚüÀûÀ¸·Î Áö¿øÇÑ´Ù
HTML 5 ´Â ÀÌ·¯ÇÑ ¸ÖƼ¹Ìµð¾î ÆÄÀÏÀ» À¥ ÆäÀÌÁö¿¡ »ðÀÔÇÒ ¼ö Àִ ű׸¦ Á¤ÀÇÇÏ°í ÀÖÀ¸¸ç
Àç»ý°ú °ü·ÃÇÑ °¢Á¾ Á¦¾î¸¦ ¼öÇàÇÒ ¼ö ÀÖ´Â ½ºÅ©¸³Æ® API°¡ Á¦°øµÈ´Ù

ÀÌÀüÀÇ ºê¶ó¿ìÀú ȯ°æ
HTML 5°¡ µîÀåÇϱâ Àü, ºê¶ó¿ìÀú ȯ°æ¿¡¼­´Â ¸ÖƼ¹Ìµð¾î Àç»ýÀ» ÀÚüÀûÀ¸·Î ÇÒ ¼ö ¾ø¾ú´Ù
´ë½Å ¿ÜºÎ ±â¼ú, Áï ºê¶ó¿ìÀú¿¡ º°µµ·Î ¼³Ä¡µÇ´Â Ç÷¯±×ÀÎ(Plug in)ÀÇ ÈûÀ» ºô¾î ¸ÖƼ¹Ìµð¾î¸¦ Ç¥ÇöÇÒ ¼ö ÀÖ¾ú´Ù. ¸ÖƼ¹Ìµð¾î Àç»ýÀ» À§ÇÑ Ç÷α×ÀÎ ±â¼ú·Î´Â ´ÙÀ½°ú °°Àº °ÍµéÀÌ ÀÖ´Ù
- À©µµ¿ì ¹Ìµð¾î Ç÷¹À̾î
- ¾îµµºñ Ç÷¡½Ã Ç÷¹À̾î
- ¾ÖÇà ÄüŸÀÓ Ç÷¹À̾î
- ¸¶ÀÌÅ©·Î¼ÒÇÁÆ® ½Ç¹ö¶óÀÌÆ®

ÀÌ·¯ÇÑ Ç÷¯±×ÀÎÀÌ ºê¶ó¿ìÀú¿¡ µû·Î ¼³Ä¡µÇ¾î¾ß¸¸ ¸ÖƼ¹Ìµð¾î Àç»ýÀÌ °¡´ÉÇÏ¿´À¸¸ç ÀÌ´Â °ð Ç¥ÁØ°ú´Â °Å¸®°¡ ¸Õ °³³äÀÌ µÇ¾î ¹ö·È´Ù

À¥ ÀÀ¿ëȯ°æÀÇ ÀÏ°üµÇ°í Ç¥ÁØÀûÀÎ Ç÷§ÆûÀ» ÁöÇâÇÏ´Â HTML5°¡ ¸ÖƼ¹Ìµð¾î Àç»ýÀ» À§ÇÑ ½ºÆåÀÌ ¸¶·ÃµÈ °ÍÀº ¾îÂ¸é ´ç¿¬ÇÑ ¼ø¸®¶ó ÇÏ°Ú´Ù. ±× ¸¸Å­ ÇöÀçÀÇ À¥Àº ¸ÖƼ¹Ìµð¾î¸¦ »©°í ³íÇÒ ¼ö´Â ¾ø´Â °ÍÀÌ´Ù

´ëºÎºÐÀÇ ÃֽŠºê¶ó¿ìÀú¿¡¼­ Video, Audio¸¦ Áö¿øÇÏ°í ÀÖ´Ù
¶ÇÇÑ ´ÙÀ½ÀÇ ÄÚµå·Î ºê¶ó¿ìÀú Áö¿ø ¿©ºÎ¸¦ üũÇØ º¼ ¼ö ÀÖ´Ù

if(!!document.createElement('video').canPlayType) {
      alert("ÇöÀç ºê¶ó¿ìÀú´Â ºñµð¿À¸¦ Áö¿øÇÕ´Ï´Ù")
}
else{
       alert("ÇöÀç ºê¶ó¿ìÀú´Â ºñµð¿À¸¦ Áö¿øÇÏÁö ¾Ê½À´Ï´Ù")
}


Video & Audio Àç»ýÇϱâ
À¥ ÆäÀÌÁö¿¡ ¸ÖƼ¹Ìµð¾î Çü½ÄÀ» »ðÀÔÇÏ°í Àç»ýÇÏ°í ÄÁÆ®·Ñ ÇÏ´Â ±âº»ÀûÀΠű׿¡ ´ëÇØ ¾Ë¾Æº¸ÀÚ

<video> , <audio> ű×
ºñµð¿À, ¿Àµð¿À¸¦ ´Ü¼øÈ÷ Àç»ýÇÑ ½ÃÅ°°íÀÚ ÇÒ °æ¿ì °£´ÜÇÑ ¸¶Å©¾÷ ¸¸À¸·Îµµ ÃæºÐÇÏ´Ù
ºñµð¿À Àç»ýÀ» À§ÇÑ <video> ÅÂ±×¿Í ¿Àµð¿À Àç»ýÀ» À§ÇÑ <audio> űװ¡ Á¦°øµÇ¸ç
°¢ ű׿¡ ¸ÖƼ¹Ìµð¾î ÆÄÀÏÀÇ À§Ä¡(¼Ò½º)¸¦ Á¦°øÇØ Áֱ⸸ ÇÏ¸é µÈ´Ù

<!DOCTYPE html>
<html>
<head></head>
<body>
   <video controls autoplay loop      
        src="http://www.double.co.nz/video_test/transformers480.ogg"></video>
   <br>  
   <audio controls autoplay loop
        src="http://www.miaowmusic.com/audio/mp3/Miaow-07-Bubble.mp3"></audio>
</body>
</html>

°£´ÜÇÑ Å±׸¸À¸·Î À¥ ÆäÀÌÁö¿¡ ºñµð¿À,¿Àµð¿À Çü½ÄÀ» Àç»ýÇÒ ¼ö ÀÖ´Ù
¿¹Á¦¿¡¼­ »ç¿ëµÈ <video>,<audio> ű×ÀÇ ¼Ó¼ºÀº ´ÙÀ½°ú °°´Ù
- src: ºñµð¿À, ¿Àµð¿À ÆÄÀÏ(¼Ò½º)¸¦ ÁöÁ¤ÇÑ´Ù
- controls: Àç»ýÀ» ÄÁÆ®·Ñ ÇÏ´Â ÄÁÆ®·Ñ ¹Ù¸¦ º¸ÀÌ°Ô ÇÑ´Ù
- autoplay: ÀÚµ¿À¸·Î Àç»ýÀ» ½ÃÀÛÇÑ´Ù


´ëü ¿ä¼Ò Ãâ·Â
HTML5 ÀÇ ºñµð¿À, ¿Àµð¿À°¡ Áö¿øµÇÁö ¾Ê´Â ºê¶ó¿ìÀú¸¦ À§ÇÑ ´ëü¿ä¼Ò Ãâ·ÂÀÌ Áö¿øµÈ´Ù
¾Æ·¡¿Í °°ÀÌ <video>,<audio> ÅÂ±× »çÀÌ¿¡ ´ëü¿ä¼Ò¸¦ Á¤ÀÇÇÏ¸é µÈ´Ù
<video src="http://www.double.co.nz/video_test/transformers480.ogg">
     HTML5 Video ¸¦ Áö¿øÇÏÁö ¾Ê´Â ºê¶ó¿ìÀú ÀÔ´Ï´Ù
</video>
<br>  
<audio src="http://www.miaowmusic.com/audio/mp3/Miaow-07-Bubble.mp3">
     HTML5 Audio ¸¦ Áö¿øÇÏÁö ¾Ê´Â ºê¶ó¿ìÀú ÀÔ´Ï´Ù
</audio>

À§ Äڵ带 MS IE 8.0 ÀÌÇÏ ¹öÀü¿¡¼­ ½ÇÇàÇØ º¸¸é ´ëü ÅؽºÆ®°¡ Ç¥½ÃµÉ °ÍÀÌ´Ù

Video & Audio Á¦¾îÇϱâ
HTML5 ¿¡´Â ºñµð¿À, ¿Àµð¿ÀÀÇ Àç»ý°ú °ü·ÃÇÑ ´Ù¾çÇÑ ½ºÅ©¸³Æ® API¸¦ Á¤ÀÇÇÏ°í ÀÖ´Ù

Àç»ý°ú °ü·ÃµÈ Á¦¾î¶ó ÇÔÀº ½ÃÀÛ, ÁßÁö, ÀϽÃÁ¤Áö, Àç»ýÀ§Ä¡ÆľÇ, Àç»ý±æÀÌ, Àç»ý¼Óµµ, º¼·ýÅ©±â, À½¼Ò°Å µîÀÌ ÀÖÀ¸¸ç Àç»ý °£ ¹ß»ýÇÏ´Â °¢Á¾ À̺¥Æ® 󸮸¦ ÀÏÄ´´Ù

½ºÅ©¸³Æ® API¸¦ ÅëÇØ Á¦¾î¸¦ Çϱâ À§Çؼ­´Â Video(Audio)ÀÇ DOM °´Ã¼¸¦ ´ë»óÀ¸·Î ¼öÇàÇÏ¸é µÈ´Ù


var video1 = document.getElementById("video1");
video1.play(); //ºñµð¿À¸¦ Àç»ýÇÔ


Video, Audio ¸¦ À§ÇÑ ´Ù¾çÇÏ°í ¸¹Àº ¼Ó¼º°ú ÇÔ¼ö ±×¸®°í À̺¥Æ®µéÀÌ Á¦°øµÈ´Ù
´ÙÀ½ÀÌ url¿¡¼­ ¸ÖƼ¹Ìµð¾î °ü·Ã API µéÀ» È®ÀÎÇØ º¸±â ¹Ù¶õ´Ù


http://www.w3schools.com/html5/tag_video.asp
http://www.w3schools.com/html5/tag_audio.asp


¸î °¡Áö ÁÖ¿äÇÑ API¸¦ ¾Ë¾Æº¸°í °ü·Ã µ¥¸ð¸¦ Á¦ÀÛÇØ º¸µµ·Ï ÇÏÀÚ

ÁÖ¿ä ¼Ó¼º
- src: ¸ÖƼ¹Ìµð¾î ÆÄÀÏ ¼Ò½º ÁöÁ¤
- currentTime: ÇöÀç Àç»ý À§Ä¡¸¦ ÃÊ ´ÜÀ§·Î ¹Ýȯ
- duration: Àüü Àç»ý½Ã°£À» ÃÊ ´ÜÀ§·Î ¹Ýȯ
- paused: ÀϽÃÁ¤Áö ¿©ºÎ ¹Ýȯ
- ended: Àç»ý Á¾·á ¿©ºÎ ¹Ýȯ
- muted: À½¼Ò°Å ¿©ºÎ ¹Ýȯ
- volume: º¼·ý °ª(0.0 ~ 1.0 ¹üÀ§¸¦ °¡Áü)
- error: ¿¡·¯ Á¤º¸¸¦ ¹Ýȯ
- networkState: ¸ÖƼ¹Ìµð¾î ÆÄÀÏ°ú °ü·ÃµÈ ³×Æ®¿öÅ© »óÅ ¹Ýȯ(Á¢¼ÓÀü, ·Îµù Áß, ¿Ï·á, ·Îµù ½ÇÆÐ µî)

ÁÖ¿ä ÇÔ¼ö
- load(): ¸ÖƼ¹Ìµð¾î¸¦ ÀÐ¾î µéÀÓ(Àç»ýÇÏÁö´Â ¾ÊÀ½)
- play(): ¸ÖƼ¹Ìµð¾î¸¦ Àç»ýÇÔ
- pause(): ÀϽà Á¤Áö

ÁÖ¿ä À̺¥Æ®
- play: Àç»ýµÉ ¶§ ¹ß»ý
- progress: ¸ÖƼ¹Ìµð¾î ÆÄÀÏÀ» ·ÎµùÁß¿¡ Áö¼ÓÀû(±×¸®°í °£ÇæÀû) ¹ß»ý
- timeupdate: Àç»ý Áß¿¡ Áö¼ÓÀû ¹ß»ý
- ended: Àç»ý Á¾·á½Ã ¹ß»ý
- error: ¸ÖƼ¹Ìµð¾î ·Îµù, Àç»ý°ú °ü·ÃÇÑ ¿¡·¯°¡ ÀÖÀ» ½Ã ¹ß»ý

ºñµð¿À µ¥¸ð ¸¸µé¾î º¸±â
ÁÖ¿ä ¼Ó¼º°ú ÇÔ¼ö, À̺¥Æ® ¸î °¡Áö¸¦ ÀÀ¿ëÇÏ¿© ºñµð¿À Àç»ýÀ» Á¦¾îÇÏ´Â °£´ÜÇÑ µ¥¸ð¸¦ ¸¸µé¾î º¸ÀÚ
<!DOCTYPE html>
<html>
<head></head>
<body>
  <video id="video1" controls  
             src="http://www.double.co.nz/video_test/transformers480.ogg"></video>  
  <br>
  <button onclick="play()">Àç»ý</button>
  <button onclick="pause()">ÀϽÃÁ¤Áö</button>
  <button onclick="mute()">À½¼Ò°Å</button>
  
  º¼·ý:<input id="volumecontrol" type="range" max="1" step="any" onchange="updateVolume()">
  
  <div id="time"></div>
  <div id="downLoadState"></div>
</body>
</html>

<script type="text/javascript">
  var video1 = document.getElementById("video1");    
            
  //ºñµð¿À Àç»ý  
  function play(){
    video1.play();
    video1.volume = volumecontrol.value;    
  }  
  //ºñµð¿À ÀϽÃÁ¤Áö
  function pause(){
    video1.pause();
  }    
  //À½¼Ò°Å
  function mute(){
    video1.muted = !video1.muted;
  }  
  //º¼·ýÁ¶Àý        
  function updateVolume() {
    video1.volume = volumecontrol.value;
  }  
  
  //timeupdate À̺¥Æ® ±¸Çö(Àç»ý½Ã°£ ÇöȲ Ç¥½Ã)
  video1.addEventListener("timeupdate",
    function(){        
      document.getElementById("time").innerHTML =
               Math.floor(video1.currentTime) + "/" + Math.floor(video1.duration) + "(ÃÊ)";
    }
    , false
  );  
    
  //progress À̺¥Æ® ±¸Çö(ºñµð¿À ´Ù¿î·Îµå ÇöȲ Ç¥½Ã)
  video1.addEventListener("progress",
    function(e){
      var downLoadState = document.getElementById("downLoadState");
      
      if(video1.networkState == 2){
        downLoadState.innerHTML = e.loaded + "/" + e.total + "byte";        
      }
      else if(video1.networkState == 3){
        downLoadState.innerHTML = "¿Ï·á";
      }
    }
    , false
  );        
</script>



ºê¶ó¿ìÀú ȣȯ¼º È®º¸
¾Õ¼­ Video, Audio ¿¡ ´ëÇÑ ºê¶ó¿ìÀú Áö¿ø ÇöȲÀ» ¾Ë¾Æ º¸¾Ò´Ù
Video, Audio ´Â µÎ °¡Áö Áö¿ø ÇöȲÀ» ÆľÇÇØ¾ß ÇÑ´Ù°í Çߴµ¥ ¿ä¾àÇÏÀÚ¸é ´ÙÀ½°ú °°´Ù
1) Video, Audio Áö¿ø ÇöȲ
2) ÄÚµ¦ Áö¿ø ÇöȲ

Áï ºê¶ó¿ìÀú°¡ Video, Audio ÀÚü¸¦ Áö¿øÇÏ´Ù°í ÇÏ´õ¶óµµ Áö¿øµÇ´Â ÄÚµ¦ÀÌ ¼­·Î »óÀÌÇϱ⠶§¹®¿¡
ºê¶ó¿ìÀú°¡ Áö¿øÇÏ´Â ÄÚµ¦Á¤º¸¸¦ Á¤È®È÷ ¾Ë°í ÀÖ¾î¾ß ¿øÈ°ÇÑ ¼­ºñ½º°¡ °¡´ÉÇÏ´Ù´Â °ÍÀÌ´Ù

HTML5 ¸ÖƼ¹Ìµð¾î ±¸ÇöÀ» À§ÇØ ºê¶ó¿ìÀú ȣȯ¼ºÀ» È®º¸Çϱâ À§ÇÑ ¸ðµç ¹æ¹ýÀ» ¾Ë¾Æ º¸ÀÚ

1) Video Áö¿ø ¿©ºÎ È®ÀÎÇϱâ
¾Õ¿¡¼­ ¾Ë¾Æ º» ¹æ¹ýÀÌ´Ù.
if(!!document.createElement('video').canPlayType) ...
À¸·Î ºê¶ó¿ìÀú°¡ Video ű׸¦ Áö¿øÇÏ´ÂÁö üũÇÒ ¼ö ÀÕ´Ù

2) ´ëü ¿ä¼Ò Ãâ·Â
¿ª½Ã ¾Õ¿¡¼­ ¾Ë¾Æ º» ¹æ¹ýÀÌ´Ù. ÅÂ±× »çÀÌ¿¡ ´ëü ¿ä¼Ò¸¦ Ãâ·ÂÇÑ´Ù
<video src="http://www.double.co.nz/video_test/transformers480.ogg">
    HTML5 Video ¸¦ Áö¿øÇÏÁö ¾Ê´Â ºê¶ó¿ìÀú ÀÔ´Ï´Ù
</video>

3) ÄÚµ¦ ȣȯ¼º È®º¸
¸¶Áö¸·À¸·Î ºê¶ó¿ìÀúº°·Î »óÀÌÇÑ ÄÚµ¦ Áö¿øÀ» °Ë»çÇÏ¿© Á¤»óÀûÀÎ µ¿ÀÛÀ» º¸ÀåÇØ¾ß ÇÑ´Ù
¿¹¸¦µé¾î »çÆĸ®ÀÇ °æ¿ì H.264 ¸¦ Áö¿øÇÏ°í ÆÄÀ̾îÆø½ºÀÇ °æ¿ì Theora¸¦ Áö¿øÇϱ⠶§¹®¿¡
¸ðµç ºê¶ó¿ìÀú¿¡¼­ Á¤»ó µ¿ÀÛ ½ÃÅ°±â À§Çؼ­´Â °¢ ºê¶ó¿ìÀú°¡ Áö¿øÇÏ´Â Çü½ÄÀ¸·Î ¼­ºñ½º¸¦ ÇØ¾ß ÇÑ´Ù

ºê¶ó¿ìÀú°¡ ƯÁ¤ ÄÚµ¦À» Áö¿øÇÏ´ÂÁö °Ë»çÇÏ·Á¸é Video ÀÇ canPlayType() ÇÔ¼ö¸¦ ÀÌ¿ëÇÏ¸é µÈ´Ù
¾Æ·¡ ÄÚµå´Â theora ºñµð¾îÄÚµ¦°ú vorbis ¿Àµð¿À ÄÚµ¦À¸·Î ±¸¼ºµÈ oggÄÁÅ×ÀÌ³Ê Çü½ÄÀÇ ¸ÖƼ¹Ìµð¾î¸¦
Áö¿øÇÏ´ÂÁö üũÇÏ´Â ÄÚµåÀÌ´Ù

var video1 = document.getElementById("video1");
return video1.canPlayType('video/ogg; codecs="theora, vorbis"'



±×¸®°í ´õ ½±°Ô ÄÚµ¦ ȣȯ¼ºÀ» È®º¸ ÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀÌ Àִµ¥,
¹Ù·Î <video>,<audio> ÅÂ±× »çÀÌ¿¡ Á¤ÀǵǴ <source> ű׸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ýÀÌ´Ù
<soruce> ű״ ¸ÖƼ¹Ìµð¾î ÆÄÀÏÀÇ À§Ä¡(¼Ò½º)¸¦ ÁöÁ¤ÇÏ´Â src ¼Ó¼ºÀÇ ¿ªÇÒ°ú µ¿ÀÏÇÏ´Ù

´Ù¸¸ ÀÌ Å±״ ¿©·¯°³¸¦ Áߺ¹Çؼ­ Á¤ÀÇÇÒ ¼ö Àִµ¥, ÀÌ °æ¿ì ¸ÖƼ¹Ìµð¾î ÆÄÀÏÀÇ Çü½Ä Áï ÄÚµ¦Á¤º¸¸¦ ¸í½ÃÇÏ¿© ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù. ºê¶ó¿ìÀú´Â ¿©·¯°³ÀÇ <source> ű׸¦ Â÷·Ê´ë·Î °Ë»çÇؼ­ ÀÚ½ÅÀÌ Áö¿øÇÏ´Â ÄÚµ¦°ú ÀÏÄ¡ÇÏ´Â <source> ¸¦ äÅÃÇÏ¿© Àç»ý½ÃŲ´Ù

±×¸®°í <source> ű׸¦ ÀÌ¿ëÇϸé HTML5 ÀÌÀüÀÇ ¸ÖƼ¹Ìµð¾î ȯ°æ Áï Ç÷¡½Ã³ª ½Ç¹ö¶óÀÌÆ®¿Í °°Àº
Çü½ÄÀÇ ÁöÁ¤µµ °¡´ÉÇÏ´Ù. Áï ºê¶ó¿ìÀú°¡ HTML5 ÀÚü¸¦ Áö¿øÇÏÁö ¾ÊÀ» °æ¿ì Ç÷¡½Ã·Î ´ëüÇÏ´Â ÄÚµå ÀÛ¼ºÀÌ °¡´ÉÇÏ´Ù´Â °ÍÀÌ´Ù(¹°·Ð °¢ ¹öÀü¿¡ ¸Â´Â µ¿¿µ»óÀÌ ¹Ì¸® ÁغñµÇ¾î ÀÖ¾î¾ß °ÚÁö¸¸...)

°á°úÀûÀ¸·Î <soruce> ű׸¦ ÀÌ¿ëÇÏ¿© ÄÚµ¦°ú °ü·ÃÇÑ ºê¶ó¿ìÀú ȣȯ¼ºÀ» ½±°Ô È®º¸ÇÒ ¼ö ÀÖ´Â °ÍÀÌ´Ù
¾Æ·¡ ÄÚµå´Â ÄÚµ¦ ȣȯ¼º È®º¸¸¦ À§ÇÑ ¸î °¡Áö »ùÇà ÄÚµåÀÌ´Ù
(Ãâó: http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/)

- ogv ¿Í mp4 Áö¿ø
<video controls>
  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
video not supported
</video>

- ogv, applet Áö¿ø
<video controls>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(this.parentNode)">
<object type="application/x-java-applet" width="480" height="288">
  <param name="archive" value="cortado-ovt-stripped-wm_r51500.jar">
  <param name="code" value="com.fluendo.player.Cortado.class">
  <param name="url" value="video.ogv">
  video and Java not supported
</object>
</video>

- mp4, swf Áö¿ø
<video controls>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
         onerror="fallback(this.parentNode)">
<object data="videoplayer.swf">
  <param name="flashvars" value="video.mp4">
  video and Flash not supported
</object>
</video>

HTML Video, Audio űװ¡ Áö¿øµÇÁö ¾ÊÀ» ¶§ Ç÷¡½Ã³ª À©µµ¿ì ¹Ìµð¾î·Î ´ëüÇÏ´Â ½ºÅ©¸³Æ®¸¦
Á¦°øÇØ ÁÖ´Â ´ÙÀ½ÀÇ »çÀÌÆ®¸¦ Âü°íÇϱ⠹ٶõ´Ù
http://mediaelementjs.com/

¸¶Áö¸·À¸·Î Video, Audio ¿Í °ü·ÃµÈ µ¥ºê ¿ÀÆä¶ó »çÀÌÆ®¸¦ Âü°íÇØ Ãß°¡ ÇнÀÇϵµ·Ï ÇÏÀÚ
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
ÃßõÃßõ : 388 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,645
php set time limit ÇÔ¼ö - ŸÀӾƿô ¼³Á¤
2,644
Setting .htaccess to allow PHP to be accessed with .xml extension
2,643
jQuery API: Manipulation, Events, Effects, Internals, Utilities
2,642
´Ù¿î·Îµå Ƚ¼ö Á¦ÇÑ ½ºÅ©¸³Æ®
2,641
ÀÚ¹Ù½ºÅ©¸³Æ® ŸÀÌ¸Ó - setTimeout, setInterval, clearInterval ÇÔ¼ö
2,640
jQuery AJAX ·Î±×ÀÎ ±¸Çö
2,639
PHP ¼¼¼Ç ·Î±×ÀÎ ±¸Çö
2,638
PHP ÄíÅ° ·Î±×ÀÎ ±¸Çö
2,637
jQuery¿¡¼­ json º¯¼ö »ç¿ë(È°¿ë)¹ý
2,636
AJAX ¹Ýº¹Ã³¸® ¹× ¼³¸í ¿¹Á¦
2,635
[Android] Intent È°¿ë ¿¹½Ã
2,634
[php] ¹è¿­À» ÀÓÀÇÀÇ ¼ø¼­·Î ¼¯´Â shuffle ÇÔ¼ö
2,633
jQuery API - ¼Ó¼º(CSS), ÃßÃâ
2,632
DIV ¿µ¿ªÀÇ À§Ä¡ ÁöÁ¤ÇÏ´Â ¹æ¹ý°ú ½ºÅ©·Ñ - Àý´ëÀ§Ä¡(absolute), »ó´ëÀ§Ä¡(relative), °íÁ¤À§Ä¡(fixed)
2,631
urlencode(), base64 encode() ÇÔ¼ö
2,630
PHP·Î IE¹öÀü üũÇÏ´Â ¹æ¹ý(Trident°ª»ç¿ë)
2,629
HTML5 °ü·Ã À¯¿ëÇÑ ·¹ÆÛ(ÂüÁ¶) »çÀÌÆ®
[HTML5] Video & Audio
2,627
HTML5 ¿Àµð¿À °î ¸ñ·Ï Àç»ý
2,626
HTML5 ¿Àµð¿À 404 ¿À·ù½Ã ´Ù¸¥ ÆÄÀÏ Àç»ý
2,625
HTML5 ¿Àµð¿À À̺¥Æ®¸®½º³Ê onerror
2,624
JavaScript Audio °´Ã¼
2,623
HTML5 Audio 2ä³Î Àç»ý
2,622
HTML5 Audio 2ä³Î Àç»ý + Àç»ý¿Ï·á ¸®½º³Ê
2,621
HTML5 À½¾Ç º¼·ý Á¶Àý
2,620
HTML5 À½¾Ç º¼·ý Á¶Àý
2,619
HTML5 ¿Àµð¿À ÀÚµ¿Àç»ý
2,618
HTML5 ¿Àµð¿À ¹Ýº¹ Àç»ý
2,617
HTML5 ¿Àµð¿À À̺¥Æ®¸®½º³Ê
2,616
Ŭ¸¯ ÇѹøÀ¸·Î °íÀ¯ÁÖ¼Ò(URL) º¹»çµÇ°Ô ÇÏ´Â ¹æ¹ý
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.