태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


* 이제 html5 태그상에서 지원해주는 video와 audio에 대해서 공부해보자.


2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황

2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점

2012/11/05 - [HTML5 튜토리얼] HTML5에 추가된 Element들 그리고 문서의 구조화

2012/11/18 - [HTML5 튜토리얼] Canvas 기초 강좌



* Video와 Audio?

: 기존의 웹이라하면 텍스트와 정보 기반으로 형성되어왔다면 이제는 다양한 창의적인 표현과 데이터 비쥬얼라이제이션과 정보를 잘 효과적으로 보여주는 것이 중요해지면서 그래프나 다양한 그래픽과 미디어들이 활용되기 시작했다. 이제 HTML5에서는 SVG와 자바스크립트를 통해 이러한 환경을 다루고자 하고 있다.


: HTML5 에서는 다른 추가 플러그인 없이 비디오와 오디오의 미디어에 대한 재생이 가능하도록 지원해주고 있다. 기존에는 웹페이지에 동영상을 넣는다면 플래시, 실버라이트, 액티브X등 다양한 플러그인들이 존재했지만 이제는 브라우져 자체에서 동영상 기능을 지원해주기 시작한 것이다. 그리고 자바스크립트를 이용하면 미디어의 재생와 일시정지를 하는 것이 가능하고, 캔버스와 조합하게 되면 다양한 


* <video> 태그

: 바로 예제를 보자.

<video controls
  src="http://media.w3.org/2010/05/bunny/movie.ogv">
Your user agent does not support the HTML5 Video element.
</video>


: 이전에는 <embedded 를 사용해서 플레이러를 가져오던가 플래시를 가져오던가 해서 동영상을 많이 제공했는데 이제는 고품질의 동영상을 위와 같이 간단한 태그 하나로 제공해줄 수 있게 되었다.


: video 태그의 attribute들을 알아보자.


 이름

설명

 src  URL  비디오 소스의 URL
 height

 숫자

 비디오의 높이 픽셀 값
 width  숫자  비디오의 넓이 픽셀 값

 controls

 "controls", "", -

 비디오의 재생, 볼륨 등 제어기들을 표시, "controls"나 공백이나 태그 안에 값 없이 controls만 적어줘도 적용된다.

 muted

 "muted", "", -

 음소거
 poster  URL

 로드되지 않고 있을 때 처음에 표시될 이미지의 URL

 loop

 "loop", "", -

 반복 재생
 autoplay  "autoplay", "", -

 자동 재생

 mediagroup

 문자열

 같은 아이디로 묶어준 비디오와 오디오 스트림들 끼리 동기화 시켜주는 그룹으로 취급한다.

 preload "none", "metadta", "auto"

 "none": 사용자가 비디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음

 "metadata": 사용자가 비디오를 필요로 하지 않을 것이지만, 기본 정보(크기, 첫 프레임, 비디오 길이, 등)는 가져온다.

 "auto": 사용자가 비디오를 필요로 하고 미리 다운로드를 한다. (기본값)



: 이러한 속성들 말고도 비디오태그 안에 다시 <source> 태그가 부여 가능하다. source 태그를 이용하는 경우에는 사용자의 코덱에 따라 재생가능한 소스를 택해서 재생해주게 된다.

<video controls>
 <source src="http://media.w3.org/2010/05/sintel/trailer.mp4"
         type='video/mp4; codecs="avc1, mp4a"'>
 <source src="http://media.w3.org/2010/05/sintel/trailer.ogv"
         type='video/ogg; codecs="theora, vorbis"'>
 <p>Your user agent does not support the HTML5 Video element.</p>
</video>



: 이렇게 태그를 추가하고나서 controls 속성을 추가하는것 이외에도 외부의 UI 위젯과 자바스크립트를 통해서 video를 제어할 수 있다. 아래는 간단하게 버튼을 이용해서 비디오를 제어하는 예이다.

<video id="myVideo">
 <source src="http://media.w3.org/2010/05/sintel/trailer.mp4"
         type='video/mp4; codecs="avc1, mp4a"'>
 <source src="http://media.w3.org/2010/05/sintel/trailer.ogv"
         type='video/ogg; codecs="theora, vorbis"'>
 Your user agent does not support the HTML5 Video element.
</video>
<button type="button" onclick="vid_play_pause()">Play/Pause</button>
<script>
function vid_play_pause() {
  var myVideo = document.getElementById("myVideo");
  if (myVideo.paused) {
    myVideo.play();
  } else {
    myVideo.pause();
  }
}
</script>
 




: 위와 같이 자바스크립트로 getElementById로 video태그를 가져와서 제어를 할 수 있는데, video를 가져왔을 때 사용할 수 있는 함수들과 속성들을 살펴보면 아래와 같다. (위의 소스에서 myVideo의 속성과 함수를 살펴보는 것이다.)


: video 자바스크립트 객체의 속성들을 알아보자. 우선 태그의 속성과 공통적인 속성들이 있다.


 이름

설명

 src 비디오 소스의 URL
 height 비디오의 높이 픽셀 값
 width 비디오의 넓이 픽셀 값

 controls

 비디오의 재생, 볼륨 등 제어기들의 표시 여부

 muted 음소거
 poster

 로드되지 않고 있을 때 처음에 표시될 이미지의 URL

 loop 반복 재생
 autoplay

 자동 재생

 mediagroup

 같은 아이디로 묶어준 비디오와 오디오 스트림들 끼리 동기화 시켜주는 그룹으로 취급한다.

 preload

 "none": 사용자가 비디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음

 "metadata": 사용자가 비디오를 필요로 하지 않을 것이지만, 기본 정보(크기, 첫 프레임, 비디오 길이, 등)는 가져온다.

 "auto": 사용자가 비디오를 필요로 하고 미리 다운로드를 한다. (기본값)



: 그리고 자바스크립트에서 제어를 목적으로 접근할수 있는 속성들이 있다.


 이름

설명

 currentTime

 현재 재생중인 시간

 defaultPlaybackRate

 기본 재생 속도
 playbackRate 현재 재생 속도

 volume

 비디오의 볼륨


    : 위의 속성들을 바꿔줌으로써 video의 상태들을 제어할 수 있게 된다. 이러한 속성들 이외에도 제어를 위한 함수들도 있다.


     이름

    설명

     load()

     로드를 시작한다.

     canPlayType(type)

     type이 재생 가능한지 여부

     play() 비디오를 재생한다.

     pause()

     비디오를 일시 정지한다.


      : 위의 canPlayType의 인자인 type가 가지는 값들은 아래와 같은 값들을 가지는 것이 보통이다.

      • video/ogg
      • video/mp4
      • video/mp4
      • audio/mpeg
      • audio/ogg
      • audio/mp4

      : 또는 코덱까지 포함하는 값을 가지기도 한다.

      • video/ogg; codecs="theora, vorbis"
      • video/mp4; codecs="avc1.4D401E, mp4a.40.2"
      • video/webm; codecs="vp8.0, vorbis"
      • audio/ogg; codecs="vorbis"
      • audio/mp4; codecs="mp4a.40.5"

      : 그럼 함수에서는 아래의 값들을 리턴하게 된다.

      • "probably" - 거의 지원
      • "maybe" - 지원할수도 있음
      • "" - 지원 안함

      : 현재는 코덱을 인자로 같이 넘겨주는 경우 "probably"로 리턴한다고 하니, 스펙이 계속 갱신되면서 어떻게 변화질지는 눈여겨 봐두는 것이 좋겠다.


      * <audio> 태그

      : 역시 바로 예제를 보자.

      <audio controls
        src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">
      Your user agent does not support the HTML5 Audio element.
      </audio>
      



      : 비디오와 유사하다. 내부에 몇가지의 <source>를 둬서 재생 가능한 쪽을 선택해서 재생하게 된다.

      <audio controls>
       <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
               type='audio/mp4'>
       <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
               type='audio/ogg; codecs=vorbis'>
       <p>Your user agent does not support the HTML5 Audio element.</p>
      </audio>
      


      : 역시 외부의 UI를 통해서 제어를 할수 있는 것 또한 같다.

      <audio id="myAudio">
       <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
               type='audio/mp4'>
       <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
               type='audio/ogg; codecs=vorbis'>
       Your user agent does not support the HTML5 Audio element.
      </audio>
      <button type="button" onclick="aud_play_pause()">Play</button>
      <script>
      function aud_play_pause() {
        var myAudio = document.getElementById("myAudio");
        if (myAudio.paused) {
          myAudio.play();
        } else {
          myAudio.pause();
        }
      }
      </script>
      


      : 이렇게 video와 거의 비슷한 형태를 가지고 attribute들도 크기를 지정하는 것만 빼면 거의 같다.


       이름

      설명

       src URL 비디오 소스의 URL

       controls

       "controls", "", -

       비디오의 재생, 볼륨 등 제어기들을 표시, "controls"나 공백이나 태그 안에 값 없이 controls만 적어줘도 적용된다.

       loop

       "loop", "", -

       반복 재생
       autoplay "autoplay", "", -

       자동 재생

       mediagroup

       문자열

       같은 아이디로 묶어준 비디오와 오디오 스트림들 끼리 동기화 시켜주는 그룹으로 취급한다.

       preload "none", "metadta", "auto"

       "none": 사용자가 비디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음

       "metadata": 사용자가 비디오를 필요로 하지 않을 것이지만, 기본 정보(크기, 첫 프레임, 비디오 길이, 등)는 가져온다.

       "auto": 사용자가 비디오를 필요로 하고 미리 다운로드를 한다. (기본값)



      : 자바스크립트를 통해서 위의 속성들을 접근할수 있으며, video와 같이 제어와 관련된 속성들도 있다.


       이름

      설명

       currentTime

       현재 재생중인 시간

       defaultPlaybackRate

       기본 재생 속도
       playbackRate 현재 재생 속도

       volume

       비디오의 볼륨


        : video와 같이 위의 속성들을 바꿔줌으로써 audio의 상태들을 제어할 수 있게 된다. 이러한 속성들 이외에도 제어를 위한 함수들도 있다.


         이름

        설명

         load()

         로드를 시작한다.

         canPlayType(type)

         type이 재생 가능한지 여부

         play() 비디오를 재생한다.

         pause()

         비디오를 일시 정지한다.


          : <video>와 <audio>는 거의 같은 속성과 함수들을 공유하기 때문에 한 쪽을 익히면 다른 한쪽도 쉽게 익숙해질 수 있을 것이다.



          * <video>와 <audio>의 이벤트들

          : 단순히 보여주기만 해서는 기존의 다양한 플러그인들을 대체할 수는 없을 것이라는 생각이 들기도 했을 것이다. 따라서 위의 자바스크립트 제어 이외에도 자바스크립트로 video와 audio의 상태 변화에 대한 이벤트 또한 다양하게 UX를 증진시키는데 중요한 역할을 한다.


          : 아래의 이벤트들을 addEventListener의 첫번째 인자로 들어가는 이벤트 명과 발생하는 상광에 대한 설명이다.


          이벤트 명 

          설명 

           loadstart

           브라우져가 미디어를 찾기 시작할 때 발생 

           progress

           브라우져가 미디어 데이터를 가져오는 중에 발생 

           suspend

           브라우져가 현재 데이터를 전부다 다운하지 않았는데 미디어 데이터를 가져오는 것이 멈췄을 때 발생 

           abort  브라우져가 에러가 아닌 상황에서 미디어 데이터를 가져오는 것을 멈췄을 때 발생 
           error  미디어 데이터를 가져오다가 에러가 발생했을 때 발생 

           emptied

           미디어의 networkState가 NETWORK_EMPTY상태로 들어가게 되었을 때 발생 (치명적인 오류로 멈추거나, 이미 리소스 선택 알고리즘이 실행중이었는데 load() 함수가 호출되었을 때)

           play  재생되었을 때, play() 함수가 리턴하고나서, autoplay로 인해 재생이 시작되었을 때 호출 
           pause

           미디어가 일시정지 되었을 때 발생 (pause()함수가 리턴 되고나서 발생)

           loadedmetadata

           브라우져가 미디어의 길이와 넓이, 높이의 메타정보를 가져왔을 때 발생 

           loadeddata

           브라우져가 현재 재생위치에서 미디어 정보를 뿌릴 수 있는 상태로 준비되면 발생

           waiting

           다음 프레임이 로드되지 않아서 재생이 멈추었을 때 발생, 브라우져는 곧 프레임이 가능해질 것이라고 예상하고 있음 

           playing 재생이 시작되었을 때 발생 
           canplay

           브라우져가 미디어 데이터의 재생이 가능해질 때 발생, 하지만 지금 재생을 시작하면 이후 버퍼링 속도가 느려서 다시 멈추지 않고 재생이 불가할것이라고 측정 함

           canplaythrough

           브라우저가 현재 재생을 시작하면, 버퍼링 속도와 재생 속도를 고려했을 때 끝까지 멈추지 않고 재생 가능할 것이라고 측정 함

           seeking seek 동작이 길게 유지되어서 브라우져에서 이벤트 발생이 될정도가 되었을 때 발생 
           seeked

           seeking이 끝나면 발생

           timeupdate 현재 재생위치가 바뀌었을 때 발생 
           ended

           미디어의 끝에 도달해서 재생이 멈추었을 때 발생 

           ratechange

           defaultPlaybackRate나 playbackRate의 속성이 변경되었을 때 발생 

           durationchange

           duration 속성이 바뀌었을 때 발생 

           volumechange

           volume 속성이 변하거나 muted 속성이 변했을 때 발생 


          : 위와 같이 다양한 이벤트들을 이용해서 현재 버퍼링 중일 때를 측정하고 재생 가능할때까지 기다렸다가 다시 재생하는 등 다양하게 UX를 발전시킬 수 있을 것이다.



          * <video> 태그 응용의 예

          : <video> 태그를 이용하여 가장 놀라운 효과를 소개시켜주자면 바로 아래 사이트의 데모일 것이다. 최신 버전의 브라우져(크롬 추천)로 들어가서 실행해보면 오로지 html과 자바스크립트로만 이런것이 가능하다는 것에서 상당히 놀랄 것이다.


          http://craftymind.com/factory/html5video/CanvasVideo.html



          : 계속 재생되는 비디오 위에 마우스 클릭을 하면 비디오가 파편이 되어 날라간다. 하지만 놀라운 것은 각 파편 속의 비디오의 재생이 멈추지 않고 계속 같이 재생된다는 점이다. 상당히 재미있는 예제이다. 같은 사이트에서 소개하는 또 다른 예는 <video>를 3d처럼 돌려가면서 보여주는 효과이다.


          http://www.craftymind.com/factory/html5video/CanvasVideo3D.html



          : 플러그인없이 오로지 브라우져로만 위와 같은 효과가 가능한 것이다. 플래시가 안되는 모바일에서도 물론 똑같이 돌아간다는 사실이 더욱 놀랍다. 물론 이러한 것들은 오로지 <video> 태그만을 가지고 구현할수는 없고 <canvas> 태그와 조합해서 이러한 효과들을 나타내는 것이다. 소스보기를 하면 구현한 방법이 다 있으니 보고서 <video> 태그의 응용 방법을 공부해보는 것도 좋을 것이다.


          * <video> 태그의 기술적으로 더 발전된 응용

          : 하지만 앞으로 <video> 태그가 활용될 것은 어쩌면 이러한 부분이 아니라 바로 WebRTC와 연동하여 활용되는 부분일지도 모른다. WebRTC는 getUserMedia라는 사용자 컴퓨터의 카메라와 마이크 등과 같은 디바이스에 접근을 하고 브라우져끼리 PeerConnection으로 이어주는 역할을 하며, 아직 완벽하게 표준화가 진행되지는 않은 상태이다. 하지만 한번쯤 살펴본다면 앞으로 브라우져 만으로 엄청 발전된 다양한 어플리케이션들이 나올 것이라고 예상할 수 있을 것이다.


          : 아래 사이트는 webrtc를 소개하는 사이트로 나중에 HTML5 튜토리얼이 끝나면 강좌로 따로 공부해볼 생각이다. 궁금하면 들어가서 안에 있는 유투브 동영상을 한번 보는 것도 도움이 될 것이다.

          http://www.html5rocks.com/en/tutorials/webrtc/basics/


          : 아무런 추가 프로그램의 설치없이 브라우져만으로 영상통화하는 캡쳐 사진



          : 여기서 카메라의 영상을 받아다가 <video> 태그로 스트리밍 방식으로 쏴주게 되는 것이다. 앞으로는 이런식으로 브라우져 기반 OTT 사업이 다양하게 나오게 되지 않을까 예상해본다.



          * 다음편

          2012/12/03 - [HTML5 튜토리얼] 새로운 form element 들

          2016/05/04 - [HTML5 튜토리얼] Web storage (localStorage, sessionStorage)

          2017/01/09 - [HTML5 튜토리얼] navigator.geolocation 위치 정보 수집 API


          * Video와 Audio 태그 기본 끝.

          저작자 표시 비영리 동일 조건 변경 허락
          신고

          이 글을 공유하세요.

          • 솜털군 2014.03.05 19:40 신고  댓글주소  수정/삭제  댓글쓰기

            좋은 정보 정말 감사합니다.
            크롬에서 쓸 음악관련 태그를 잘 몰라서 곤란했는데 큰 도움이 되었어요.

          • lazy 2014.05.12 12:36 신고  댓글주소  수정/삭제  댓글쓰기

            좋은 정보 감사합니다.^^
            저도 덕분에 현재 막혀있는 문제점을 해결했습니다.

          • Limiter 2014.05.18 11:49 신고  댓글주소  수정/삭제  댓글쓰기

            멋진 정보네요. 기존 embed나 object의 경우에는 소스도 혼잡했었고.. 가장 중요한건 아이프레임이나 위와 같은 소스는 네이버의 간섭이 있어서 정상적인 사용이 힘든 태그도 있었죠. 게다가 모바일의 경우에는 출력되는 브라우져가 있고, 안되는 브라우져가 있어서 왔다 갔다 하는것도 짜증났는데 말이죠. 특히나 audio 태그는 정말 착한 태그군요. 네이버 카페나 블로그등 음악 BGM을 사용하려 하면 웹에서는 작동하게끔 구현은 가능하나 모바일에서는 먹통이 되는게 다반사더군요. 하지만 이번 audio 태그를 통해서 모바일은 물론 웹에서도 완벽하게 구현된다는게 정말 놀랐습니다. 더 중요한건 네이버가 태그 간섭을 하지 않아야 되는데 말이죠 - _ -... 이 문제는 티스토리에선 아무것도 아니라지만 네이버는 좀 심한감이 있죠.. 왠만한 사업을 확장해서 독주 기업으로 낙인도 찍힌마당에 이런 문제쯤은 완화해주어야 하는데 말이죠. 물론 여기서 문제가 되는건 저작권이기는 하겠지만요..

            • Unikys 2014.07.15 15:11 신고  댓글주소  수정/삭제

              그렇기 때문에 히트 수를 바라면 네이버 블로그를 택하지만, 나름대로의 자유로움을 원하면 최소한 티스토리를 택하곤 하죠. 이제는 블로그 사용자들도 바보가 아니니 설마 막지는 않겠죠... 저는 개인적으로 오디오/비디오 태그에 기대하는건 ActiveX가 확장 가능했던 한 분야인 웹에서의 멀티미디어 분야에서 ActiveX를 강렬하게 밀어낼 수 있지 않을까 하는 기대를 가집니다. 남은건 이제 보안 쪽이겠네요 ㅎㅎ

          • 꼬꼬 2014.09.04 19:22 신고  댓글주소  수정/삭제  댓글쓰기

            감사합니다 감사합니다. 감사합니다. 너무 감사해요 T_T 모바일에서 오브젝트 와 embed 소스를 아무래 해두 재생이 안되서 힘들었는데 저같은 초보자 들에게 이런 구세주 같은 포스팅을 해주시다니 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            너무너무너무너무 감사합니다.

          • 꼬꼬 2014.09.04 19:22 신고  댓글주소  수정/삭제  댓글쓰기

            감사합니다 감사합니다. 감사합니다. 너무 감사해요 T_T 모바일에서 오브젝트 와 embed 소스를 아무래 해두 재생이 안되서 힘들었는데 저같은 초보자 들에게 이런 구세주 같은 포스팅을 해주시다니 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            너무너무너무너무 감사합니다.

          • 2014.11.13 14:20  댓글주소  수정/삭제  댓글쓰기

            비밀댓글입니다

            • Unikys 2014.11.19 08:27 신고  댓글주소  수정/삭제

              네, 순차적으로 재생하려면, 자바스크립트가 필요합니다. 아래와 같이 개발하면 되겠네요.

              1. 곡의 목록(url 정보)과 현재 재생중인 곡의 인덱스를 가지고 있는다.
              2. <audio>에 ended 이벤트 핸들러를 부여한다.
              3. ended 이벤트가 발생하면 <source>의 src 값을 다음 곡 url 정보로 변경하고 재생중인 곡의 인덱스를 추가한다.
              4. <audio>에 canplay 이벤트 핸들러를 부여해서 해당 이벤트 핸들러 내에 play()를 한다.

              부가적으로 곡의 정보를 같이 보관하면 다양한 UX를 제공할 수 있을 것 같네요. 곡의 목록은 자바스크립트에 하드코딩해도 되지만, 서버의 DB로 저장하는게 관리적인 면에서 편리할 것 같네요.

          • 하하 2014.11.15 01:36 신고  댓글주소  수정/삭제  댓글쓰기

            지금 사용하신 플레이어가 자바스크립트에서 제공하는 기본적인건가요?..
            배경색이 검정색이라 변화를 주려고 했더니 배경색도 안변하네요..

            • Unikys 2014.11.19 08:22 신고  댓글주소  수정/삭제

              네, 해당 플레이어는 '브라우져'에 기본적으로 내장되어있는 플레이어입니다. 만약 별도의 플레이어를 커스터마이징하고 싶으시다면 <audio>는 display:none을 해주시고 <div>나 <img> 등으로 만든 다음 이벤트핸들러를 할당해서 <audio>의 함수들을 호출하면 됩니다.

          • KimSH 2015.01.18 03:02 신고  댓글주소  수정/삭제  댓글쓰기

            안녕하세요 요즘 html을 하면서 음악출력과 영상 출력때문에 검색을하다가 여기에 오게됫는데요 일단 강좌 잘봣습니다.
            그런데 <audio controls src="bgm\bro guy.mp3" type='audio/mp4'> 이런식으로 노래를 재생하게 하고서 옆에 글씨를 나오게 하려고 <audio controls src="bgm\bro guy.mp3" type='audio/mp4'> 노래이름! 이런식으로 텍스트를 썻는데 무시당하네요

            그리고 노래재생하는거도 여러개 하고싶어서
            <audio controls src="bgm\bro guy.mp3" type='audio/mp4'>
            <audio controls src="bgm\bgm\A Little Story Valentin.mp3" type='audio/mp4'>

            이런식으로햇는데 한개나오네요 그냥 첫번째 후론 다 무시당합니다.
            <Img src="">로 이미지 넣은거도 무시당하더군요 무시안당하게 할수있을까요?
            css로 하면된다는데 정확히 몰라서요..

            • Unikys 2015.01.19 14:11 신고  댓글주소  수정/삭제

              네, 아마도 <audio>로 열어주고나서 </audio>로 안 닫아주신 것 같은데 맞는지 모르겠네요. 위의 글에도 내용이 있을 것 같은데, 태그 사이에 들어오는 내용 즉, <audio>{여기있는 내용}</audio>은 브라우져가 <audio>를 지원하지 않으면 나타나게 됩니다.

          • KimSH 2015.01.20 16:15 신고  댓글주소  수정/삭제  댓글쓰기

            네 감사합니다. 친구한테도 물어보니 </audio>를 안닫았더군요 ㅎㅎ
            그리고 audio태크를 9개 넣엇는데 사이트 로딩시 6개만불러오고 3개는 못불러오는데
            한번에 불러오게 하는방법이 없을까요?

            • Unikys 2016.05.01 03:39 신고  댓글주소  수정/삭제

              아마 웹서버에서 동시 접속 세션수의 제한이 있을수도 있습니다. 확인이 필요한 부분은 첫번째로 세션 설정 쪽이고, 이 부분에 대한 해결이 어려우면 lazy loading으로 6개 로딩 후 onload 이벤트 등을 통해서 나머지 3개를 추가로 불러오는 등의 방법도 가능할 것 같습니다.

          • thankyou 2015.02.13 15:57 신고  댓글주소  수정/삭제  댓글쓰기

            좋은 정보 감사합니다.

          • 파아란 2015.05.17 14:43 신고  댓글주소  수정/삭제  댓글쓰기

            이번에 HLS 프로토콜을 이용해서 서버에서 안드로이드로 실시간으로 음성을 제공하는 기능을 구현하려고 합니다.
            그리고 안드로이드에서는 제공 받은 음성을 통해 앱 사용자에게 음성을 들려주려고 합니다.
            이게 가능할까요?

            • Unikys 2016.05.01 03:37 신고  댓글주소  수정/삭제

              네, 가능은한데 문제는 안드로이드와 같은 모바일 환경에서는 데이터 때문에 자동으로 재생이 안되기도 하고 일부 단말(특히 아이폰..)에서는 재생시 다른 동작을 재한하기도 합니다. (예: 유투브 모바일 페이지) 단말마다 그러한 제약이 다르니 최신 단말에 시험해보는게 필요하다고 생각합니다.

          • 좋은 설명 감사드립니다.! 혹시 사이트에서 배경음악이 자.. 2016.12.07 15:41 신고  댓글주소  수정/삭제  댓글쓰기

            좋은 설명 감사드립니다.! 혹시 사이트에서 배경음악이 자동으로 나오는데, 영상을 재생할시 자동으로 오디오가 일시정지 되게 할 수는 없을까요?

            • Unikys 2016.12.12 12:13 신고  댓글주소  수정/삭제

              영상을 <video> 태그 등으로 넣는다면, 위의 이벤트 명 중 onplay 이벤트를 <video> 태그에 걸어서 <audio> 태그는 pause() 호출하면 됩니다. 다른 외부 영상(유튜브 등)이면 제공되는 API를 확인해야 됩니다.

          • JJCHARM 2016.12.23 11:38 신고  댓글주소  수정/삭제  댓글쓰기

            크롬에서 audio에 다운로드 버튼이 보이는데 이 다운로드 버튼을 없애는 방법은 없을까요?

            • Unikys 2016.12.29 06:45 신고  댓글주소  수정/삭제

              옛날에는 다운로드 버튼이 없었는데 이제보니 기본으로 들어가있네요. 사실 다운로드를 100% 막을 방법이 없기는 하지만, 크롬에서는 CSS를 강제로 설정하는 것이 가능합니다. 스택오버플로우에서 찾아보니 아래와 같이 CSS를 추가하면 없앨 수 있습니다.

              video::-internal-media-controls-download-button {
              display:none;
              }

              video::-webkit-media-controls-enclosure {
              overflow:hidden;
              }

              video::-webkit-media-controls-panel {
              width: calc(100% + 30px);
              }

              그런데 이러한 방법보다 기본 인터페이스를 사용하지 않고 커스텀 인터페이스를 하는 것이 편할 수도 있을 것 같습니다. 왜냐하면 브라우져마다 서로 다른 인터페이스를 제공하는 것보다 크로스브라우져로 같은 인터페이스가 보기에는 좋을테니까요.

          • Goods 2016.12.30 16:11 신고  댓글주소  수정/삭제  댓글쓰기

            다운로드 버튼 막기 관련해서 한참 찾았는데.. 감사합니다!
            블로그 잘 보고 있습니다 ^^

          • 류중근 2017.05.16 09:25 신고  댓글주소  수정/삭제  댓글쓰기


            노래 열댓 개를 줄줄이 나열한 음악 태그가 있는데 IE에선 멀쩡했습니다.

            어느 날 그걸 크롬에서 봤더니 열댓 개가 한꺼번에 와글와글 미치고 팔딱 뛰겠데요.

            물론 재생 버튼을 눌러야 재생하게끔 짰었는데도 아무짝에도 소용없이 말입니다.

            오늘 이렇게도 귀하고 좋은 정보 얻어서 제 기분 날아갑니다.

            더불어서 또한, 그대여~ 매우 고맙습니다.

          질문이나 의견을 댓글로 달아 주세요

          티스토리 툴바