[HTML] 멀티미디어 태그

외부 파일 삽입

<object data = "경로/파일명.확장자" type = "유형" name = "이름" width = "너비" height = "높이"> </object>

<!-- <object> 태그를 지원하지 않는 경우 -->
<embed src = "경로/파일명.확장자" type = "유형" width = "너비" height = "높이">

 

오디오/비디오 삽입

<!-- 오디오 삽입 -->
<audio src = "경로/파일명.확장자" [속성]> </audio>

<!-- 비디오 삽입 -->
<video src = "경로/파일명.확장자" [속성]> </video>

 

  - 속성

      1) autoplay

          : 오디오/비디오를 자동 재생함

      2) controls

          : 컨트롤 막대를 표시함 (재생/정지, 진행 바, 볼륨 등)

      3) loop

          : 오디오/비디오를 반복 재생함

      4) muted 

          : 오디오/비디오를 재생하지만 소리는 음소거함

      5) preload 

          : 재생 버튼을 눌러 재생하기 전에, 오디오/비디오 파일을 다운로드해서 준비함

      6) poster = "경로/이미지명.확장자"

        : 영상 재생 전 초기 화면(썸네일)을 지정함

 

여러 코덱의 파일을 함께 지정

<video [속성]>
    <!-- 우선적으로 실행할 확장자 파일 -->
    <source src = "경로/파일명.확장자" type = "미디어유형" [codecs = "코덱1, 코덱2, ..."]>
    대체텍스트
    <!-- 앞 파일이 실행되지 않으면 실행할 확장자 파일 -->
    <source src = "경로/파일명.확장자" type = "미디어유형" [codecs = "코덱1, 코덱2, ..."]>
    대체텍스트
    ...
    [<track ~>]
</video>

 

  - 최신 브라우저와 이전 브라우저에서 모두 재생할 수 있도록 함

  - 파일이 정상적으로 재생되면 대체 텍스트는 화면에 표시되지 않음

 

 

반응형

728x90

---

비디오에 외부 자막 파일 연결

<track [kind = "종류"] src = "경로/파일명.vtt" srclang = "사용언어" [label = "제목"] [default]>

 

  - 속성

      1) kind

          · kind = "subtitles" (기본값) : 자막

          · kind = "captions"

          · kind = "descriptions" : 콘텐츠 설명 (미표시)

          · kind = "chapters" : 탐색을 위한 장 제목 (미표시)

          · kind = "metadata" : 콘텐츠 정보 (미표시)

      2) label

          : 자막이 여러 개일 경우, 자막 식별 제목 표시

      3) default

          : 자막 파일이 여러 개일 경우, 기본으로 사용될 자막을 지정함 

#  WebVTT 자막 파일

  - 모든 브라우저에서 공식적으로 지원함

  - 자막 내용과 시간 정보를 함께 담고 있음

 

시작시간 -> 종료시간
자막내용

시작시간 -> 종료시간
자막내용

...

 

 

---

기타 메모

- 인코딩 (Encoding)
    : 원본 비디오를 컴퓨터에서 사용할 수 있는 비디오 파일로 변환
- 디코딩 (Decoding)
    : 컴퓨터의 비디오 파일에 있는 비디오 정보를 가져와 플레이어에 보여줌
- 비디오 코덱
    : 인코딩과 디코딩을 수행함