외부 파일 삽입
<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>
- 최신 브라우저와 이전 브라우저에서 모두 재생할 수 있도록 함
- 파일이 정상적으로 재생되면 대체 텍스트는 화면에 표시되지 않음
비디오에 외부 자막 파일 연결
<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)
: 컴퓨터의 비디오 파일에 있는 비디오 정보를 가져와 플레이어에 보여줌
- 비디오 코덱
: 인코딩과 디코딩을 수행함
'HTML & CSS' 카테고리의 다른 글
[CSS] 개요 (0) | 2023.02.05 |
---|---|
[HTML] 폼 태그 (0) | 2023.02.05 |
[HTML] 이미지 태그 (0) | 2023.02.05 |
[HTML] 링크 태그 (0) | 2023.02.05 |
[HTML] 표 태그 (1) | 2023.02.05 |