본문 바로가기

html5의 새로운 태그인 Audio, Video 태그의 속성 및 이벤트 정리

반응형

 

 

Video 태그 속성

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 태그 속성

       

       

      이렇게 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의 상태 변화에 대한 이벤트 또한

           

          다양하게 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를 발전시킬 수 있을 것이다.

           

           

           

           

          출처 - http://unikys.tistory.com/278

          반응형