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

HTML5 Video - Audio CurrentTime - Ended ¹®Á¦Á¡
8³â Àü
ÃÖ±Ù °³¹ßÀÛ¾÷ Áß Samsung Galaxy S4(Android 4.4.2)ÀÇ WebView ¹× ±âº» Web Browser¿¡¼­ ¾Æ·¡¿Í °°Àº ¹®Á¦Á¡À¸·Î ÀÎÇÑ ¹ö±×°¡ Á¸ÀçÇÏ¿´°í, ±×¿¡ µû¸¥ ÇØ°á¹ýÀ» ¼Ò°³ÇÕ´Ï´Ù.

HTML5ÀÇ Audio, Video ¿ä¼Ò¸¦ »ç¿ëÇÏ´Ù º¸¸é Ended Event ¹× Loop Atturibute°¡ ÀÛµ¿ÇÏÁö ¾Ê´Â Çö»óÀ» °Þ°Ô µË´Ï´Ù. ±× ÀÌÀ¯´Â ¾Æ·¡¿Í °°½À´Ï´Ù.
Element.currentTimeÀÇ °ªÀÌ milliseconds(1/1000ÃÊ)°¡ ¾Æ´Ñ picoseconds(1/1000000000000ÃÊ) ´ÜÀ§·Î ³ª¿À´Â Çö»óÀÌ ¹ß»ý ÇÔ
Element.duration °ªÀÇ Â÷ÀÌ ¹ß»ýÀ¸·Î ÀÎÇØ Loop, Ended µîÀÇ ±â´É ¿À·ù

ÇØ´ç ¹®Á¦¸¦ ÇØ°á Çϱâ À§Çؼ­´Â picoseconds(ÀÌÇÏ ps)¸¦ milliseconds(ÀÌÇÏ ms)·Î º¯°æ ÇØÁÖ´Â ÀÛ¾÷ÀÌ ÇÊ¿äÇÕ´Ï´Ù.

ps¸¦ ms·Î º¯È¯ÇÏ´Â ¹æ¹ýÀº ¸Å¿ì °£´ÜÇÕ´Ï´Ù. JavaScript¿¡¼­ Á¦°øÇÏ´Â Number.prototype.toFixed ¸Þ¼Òµå¸¦ ÀÌ¿ëÇÏ¿© ¼Ò¼öÁ¡ 3ÀÚ¸®¸¸ Ç¥½ÃÇØÁÖ¸é µË´Ï´Ù.
var ps = 1.000000000000
var ms = ps.toFixed(3); // 1.000

¶ÇÇÑ,½Ã½ºÅÛ¿¡¼­ ¹ß»ý ½ÃÄѾßÇÒ Ended Event°¡ ÀÛµ¿ÇÏÁö ¾Ê±â ¶§¹®¿¡ ÀÌ ºÎºÐÀ» µ¿ÀûÀ¸·Î È®Àå ¹× Custom Event È£ÃâÀÌ ÇÊ¿äÇÕ´Ï´Ù.
Cutsom Event¸¦ È£ÃâÇÏ´Â ÀÌÀ¯´Â ´ëºÎºÐÀÇ ºê¶ó¿ìÀúÀÇ °æ¿ì Ended Event°¡ Á¤»óÀÛµ¿Çϱ⠶§¹®¿¡ Event°¡ Áߺ¹À¸·Î È£ÃâµÉ °¡´É¼ºÀÌ Àֱ⠶§¹®ÀÔ´Ï´Ù.

ÇØ´ç Cross-Browsing Trick ¿¡¼­´Â Ended Event ´ë½Å TimeUpdate Event¸¦ ÀÌ¿ëÇØ Finish Event¸¦ È£ÃâÇϵµ·Ï ÇÏ°Ú½À´Ï´Ù.

À§ ³»¿ëÀ» Åä´ë·Î ÇÏ¿© ÀÛ¼ºµÈ JavaScript ¼Ò½ºÄÚµå´Â ¾Æ·¡¿Í °°½À´Ï´Ù. ¡°html5.media.cross.browse.js¡± ·Î ÀúÀåÇØÁÖ¼¼¿ä.
/* HTML5 Media Element Time Events Fix Kits */
(function(window, undefined){
  // Media Tag Names
  var media_tags = ['audio', 'video'];
  for(var type, type_id = 0; type = media_tags[type_id]; type_id++){
    // Get Media Element
    var tags = document.getElementsByTagName(type);
    // Each Media Element
    for(var media, index = 0; media = tags[index]; index++){
      // Binding Finish Event for Loop
      media.addEventListener('finish', function(e){
        var loop = !((this.loop === undefined) || (this.loop === false) || (this.loop === 'null'));
        if(loop) this.play();
      }, false);
      // Binding Loaded Data Event for AutoPlay
      media.addEventListener('loadeddata', function(e){
        var auto = !((this.autoplay === undefined) || (this.autoplay === false) || (this.autoplay === 'null'));
        if(auto) this.play();
      }, false);
      // Fix Media PicoSeconds Time Problems
      media.addEventListener('timeupdate', function(e){
        // Self - this function
        var callee = arguments.callee;
        // Cross-Browsing Timeout Callback
        callee.timeoutCB = function(){
          // Trigger Finish Event
          var eventCB = document.createEvent("HTMLEvents");
              eventCB.initEvent('finish', true, false);
          this.dispatchEvent(eventCB);
          // Trigger Ended Event - system base event function calling
          var eventOB = document.createEvent("HTMLEvents");
              eventOB.initEvent('ended', true, false);
          this.dispatchEvent(eventOB);
          // Reset Current Duration Time (once calling)
          this.addEventListener('play', function(){
            this.setCurrentTime(this.currentTime = 0);
            this.removeEventListener('play', arguments.callee);
          }, false);
        };
        // Save CurrentTime (ps to ms)
        callee.currentTime = Math.max(callee.currentTime || 0, this.currentTime).toFixed(3);
        // Calc RemainTime (Total Duration - Current Duration)
        if((callee.remainTime = parseFloat((this.duration - callee.currentTime).toFixed(3))) === 0){
          // Declare Methd : setCurrentTime(time)
          this.setCurrentTime = this.setCurrentTime || function(time){ this.currentTime = time; }
          // Reset Current Duration Time and Player State
          this.pause(); this.setCurrentTime(callee.currentTime = this.currentTime = 0);
          // ***JS Tricks, Blocking Duplicate Event Callback Function
          clearTimeout(callee.timeoutHandle);
          callee.timeoutHandle = setTimeout(callee.timeoutCB.bind(this), 100);
        }
      }, false);
    }
  }
})(window);

À§ ¼Ò½ºÄÚµå¿Í °°Àº °æ·Î¿¡ index.html¸¦ ¾Æ·¡¿Í °°ÀÌ ¸¸µé°í ¿À·ù°¡ ¹ß»ýÇÑ ´Ü¸»±â¿¡¼­ ¿­¾îº¸½Ã±â ¹Ù¶ø´Ï´Ù.
<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML5 Media CurrentTime Problem ::: Ultimate;D ::: Cross-Browsing</title>
  </head>
  <body>
    <!-- Video ¼Ó¼ºÀÌ Á¤»óÀÛµ¿ÇÏ´ÂÁö È®ÀÎÇϱâ À§ÇÑ ¿ä¼Ò. -->
    <video id="video" src="http://www.w3schools.com/html/mov_bbb.mp4" controls="controls"></video>
    <script type="text/javascript">
      <!-- Finish À̺¥Æ®°¡ È£Ã⠵ǴÂÁö È®ÀÎÇϱâ À§ÇÑ ¿ä¼Ò. -->
      document.getElementById("video").addEventListener('finish', function(){
        alert('finish');
      }, false);
      <!-- Ended À̺¥Æ®°¡ È£Ã⠵ǴÂÁö È®ÀÎÇϱâ À§ÇÑ ¿ä¼Ò. -->
      document.getElementById("video").addEventListener('ended', function(){
        alert('ended');
      }, false);
    </script>
    <script type="text/javascript" src="html5.media.cross.browse.js"></script>
  </body>
</html>
ÃßõÃßõ : 1205 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
110
Stream an audio file with MediaPlayer ¿Àµð¿À ÆÄÀÏ ½ºÆ®¸®¹Ö Çϱâ
109
Audio Streaming PHP Code
108
Vimeo (ºñ¸Þ¿À) API ¸¦ »ç¿ëÇÏ¿© Ç÷¹À̾î ÄÁÆ®·ÑÇϱâ
107
HTML <Audio> »ç¿ë¹ý
106
[HTML5] Video & Audio
105
HTML5 ¿Àµð¿À °î ¸ñ·Ï Àç»ý
104
HTML5 ¿Àµð¿À 404 ¿À·ù½Ã ´Ù¸¥ ÆÄÀÏ Àç»ý
103
HTML5 ¿Àµð¿À À̺¥Æ®¸®½º³Ê onerror
102
JavaScript Audio °´Ã¼
101
HTML5 Audio 2ä³Î Àç»ý
100
HTML5 Audio 2ä³Î Àç»ý + Àç»ý¿Ï·á ¸®½º³Ê
99
HTML5 À½¾Ç º¼·ý Á¶Àý
98
HTML5 À½¾Ç º¼·ý Á¶Àý
97
HTML5 ¿Àµð¿À ÀÚµ¿Àç»ý
96
HTML5 ¿Àµð¿À ¹Ýº¹ Àç»ý
95
HTML5 ¿Àµð¿À À̺¥Æ®¸®½º³Ê
HTML5 Video/Audio CurrentTime/Ended ¹®Á¦Á¡
93
audio ¿¤¸®¸ÕÆ®ÀÇ onplay À̺¥Æ® ó¸® ½Ã ÁÖÀÇ»çÇ×
92
Windows Media Player Á¦¾î
91
¹Ìµð¾î Ç÷¹ÀÌ ¹× ¹öÆÛ¸µ üũ
90
¹Ìµð¾îÇ÷¹À̾î Àç»ý ½Ã°£ ÃßÃâ
89
¹Ìµð¾î Ç÷¹ÀÌ¾î °´Ã¼ Á¦¾îÇϱâ
88
¹Ìµð¾î ÆÄÀÏ Àç»ó/¸ØÃã/¼Ò¸®/À½¼Ò°Å/¹Ýº¹Àç»ý µî
87
¹Ìµð¾î Ç÷¹À̾î Á¦¾îÇϱâ 1~4
86
¹Ìµð¾î Ç÷¹À̾îÀÇ »óÅÂ
85
¹Ìµð¾î Ç÷¹ÀÌ ¹× ¹öÆÛ¸µ üũ
84
event - volume bar
83
¹Ìµð¾î Ç÷¹À̾î7.0 °´Ã¼Á¦¾î ¼Ó¼º
82
ÀÚ¹Ù½ºÅ©¸³Æ®·Î ½ºÅ©·Ñ¹Ù¸¦ Á¦¿ÜÇÑ »ç¿îµå Àç»ý,ÀϽÃÁ¤½Ã,Á¤Áö, º¼·ýÁ¦¾î
81
¿øÇÏ´Â ½Ã°£ºÎÅÍ Àç»ý
1234
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.