HTML 오디오/ 비디오 재생
1. <embed> 태그
외부 애플리케이션이나 상호작용 콘텐츠를 위한 컨테이너(html4는 지원X)
속성
src="URL" height/width/type=" "
url - 내장되는 외부파일의 주소/이름
height - 내장되는 콘텐츠의 높이
width - 내장되는 콘텐츠의 폭
type - 내장되는 콘텐츠의 미디어 타입
<body>
오디오 재생: <br/>
<embed src="song.mp3" type="audio/mpeg"><br><br>
비디오 재생: <br>
<embed src="movie.mp.4" width="4000" height="300" type="video/mp4">
</body>1. <audio> 태그
외부 플러그인의 도움 없이 간단히 오디오 재생
<audio src="오디오파일 주소</audio>
<audio src="song.mp3"></audio>
▼
기본적으로 필요한 속성이 있다.
src="URL" -> 재생할 오디오 파일의 URL/속성명만 표시
autoplay -> 웹문서 로딩시에 오디오를 자동으로 재생할지 여부/속성명만 표시
controls - 오디오 제어기(재생, 일시정지,볼륨 등)의 표시 여부/속성명만 표시
loop -> 반복 재생 여부
muted -> 음소거 여부
preload="값" -> 웹문서가 로딩될 때 오디오의 로딩 상태
- none : 사용자가 재생을 시작하기 전까지
웹 브라우저가 오디오 미리 파일을 로드하지 않음
- auto : (기본)페이지가 로드될 때 바로 전체 파일을 자동으로 로드
- metadate : 사용자가 재생시키기 전까지는 오디오의 메타 정보(크기,첫 프레임 등)만 로드
autoplay 속성이 지정되면 preload 속성은 무시됨
<body>
<audio src="audio.ogg" controls autoplay loop></audio>
</body>
오디오 파일 형식
1. mp3(.mp3) : MPEG-1오디오 규칙(MPEG-1Audio Layer-3) 으로 개발된 오디오 압축 기술
2. Wav(.wav> : 윈도우에서 오디오 재생을 위해 MS와 IBM이 개발한 비압축 방식
3. Ogg(.ogg/.oga) : MP3 대안으로 개발되어 스트리밍 방식으로 멀티미디어 표현을 위한 공개 소스기반의 파일 형식
브라우저 별 지원 오디오 형식이 다름
다양한 포맷을 지정하는 <source> 태그
: 하나의 소스 파일에 대해 서로 다른 형식을 갖는 여러파일을 동시에 지정하기 위한 태그
° <audio>와 <video> 태그의 src 속성의 역할을 대신함 - 태그 내에서 여러개 지정
-> 가장위의 <source> 태그부터 차례로 지원하는 형식을 찾아서 재생
속성(재생을 시켜주는 역할)
• src="URL" -> 재생할 미디어 파일의 URL
• type="MIME형식" -> 재생할 파일의 MIME 형식 - "audio/mp.3", "audio/wav", "audio/ogg"
<body>
오디오 재생:<br/><br/>
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.wav" type="audio/wav">
<source src="audio.mp3" type="audio/mp3">
</audio>
</body>1. <video> 태그
<audio> 태그의 사용방법과 거의 동일
<video src="bunny.mp4" controls></video>
속성 - <audio> 태그의 속성을 그대로 사용
src="URL" -> 재생할 오디오 파일의 URL/속성명만 표시
autoplay -> 웹문서 로딩시에 오디오를 자동으로 재생할지 여부/속성명만 표시
controls - 오디오 제어기(재생, 일시정지,볼륨 등)의 표시 여부/속성명만 표시
loop -> 반복 재생 여부
muted -> 음소거 여부
preload="값" -> 웹문서가 로딩될 때 오디오의 로딩 상태
- none : 사용자가 재생을 시작하기 전까지
웹 브라우저가 오디오 미리 파일을 로드하지 않음
- auto : (기본)페이지가 로드될 때 바로 전체 파일을 자동으로 로드
- metadate : 사용자가 재생시키기 전까지는 오디오의 메타 정보(크기,첫 프레임 등)만 로드
추가
width="픽셀" , height="픽셀" -> 비디오 컨텐츠가 표시될 영역의 크기(폭, 넓이)
poster="URL" -> 지정한 비디오 데이터가 설정되어 있지 않거나 비디오가 로딩되는 동안에 보여줄 이미지를 지정
<body>
비디오 재생:<br/><br/>
<video src="bunny.mp4 controls
width="400" height="300"
poster="bunny_poster.jpg">
</video>
</body>
비디오 파일 형식
1. MP4(.mp4) : MPEG-4에서 규정된 비디오 파일 형식/ H.264 비디오 코덱/ AAC 오디오 코덱
2. WebM(.webm) : 구글이 개발한 고화질 영상 압축 형식/ VP8 비디오 코덱/ Vorbis 오디오 코덱
3. Ogg(.ogv) : 멀티미디어 표현을 위한 공개 소스기반의 파일 형식/ Theora 비디오 코덱/ Vorbis 오디오 코덱
각 브라우저/ 버전 마다 지원 파일 형식이 다름
<source> 태그를 사용한 비디오 재생
<body>
비디오 재생:<br/><br/>
<video controls>
<source src="movie.ogv"
type="video/ogg">
<source src="movie.webm"
type="video/webm">
<source src="movie.mp4"
type="video/mp4">
</video>
</body>비디오 재생구간 지정
- 미디어 콘텐츠를 재생할 때 특정 구간을 지정하여 재생
- <audio>,<video> 또는 <source>태그의 src속성 이용
src="파일명#t=[시작시간][종료시간]"
시간 표시 형식 -> 시:분:초
#t=[시:분:초]▼
src="a.mp4#t=1:20:32,2:05:00" -> 1시간20분32초~2시간5분까지
src="a.mp4#t=10,20" -> 10초~20초까지 재생
src"a.mp4#t=,10" -> 처음부터 10초까지 재생
src="a.mp4#t=20". -> 20초부터 재생▼
<body>
비디오 재생:<br/><br/>
<video src="bunny.mp4#t=10,20"
controls autoplay>
</video>
</body>자막 처리를 위한 <track> 태그
: 여러 언어나 비디오 설명을 제공하거나 또는 자막이나 캡션 같이 시간이 지정된 텍스트 파일을 지정
• <audio>/<video> 태그의 하위태그로 사용 - 단독으로 사용하면 아무것도 표시되지 않음
<video src="video_track.mp4"controls autoplay loop>
<track src="video_track.vtt"kind="subtitles"
srclang="ko"label="예제 자막표시"default>
</video>
속성
• src="URL" -> (필수항목) 텍스트 트랙 파일(.vtt)의 URL 지정
• kind="속성값" -> 텍스트 트랙의 종류 지정 (기본:subtitles)
• label="텍스트" -> 사용자가 읽을 수 있는 트랙의 제목 지정
• srclang="언어코드" -> 텍스트 트랙 데이터의 언어 지정 / kind="subtitles"인 경우에는 필수 항목
• default -> 사용자가 별도의 트랙을 지정하지 않는 경우 기본 트랙으로 활성화되어야 함을 지정
<track> kind 속성
속성 값의 종류
subtitles -> 비디오의 자막을 정의 (대화를 글로 옮기거나 번역한 것. 소리는 들리지만 언어를 이해할 수 없는 경우에 적합)
caption -> 대화나 사운드 효과를 글로 옮기거나 번역한것
(소리를 또렷하게 알아들을 수 없는 청각이 약한 사람들에게 적합)
descriptions -> 비디오 내용에 대한 텍스트 형식의 설명을 정의 ( 시각 장애를 가진 사람에게 적합)
metadata -> 스크립트에서 사용하기 위한 내용을 정의(브라우저에는 표시되지 않음)
트랙 파일의 형식
WebVTT(Web Video Text Tracks) 형식 : http://w3c.github.io/webvtt/
WebVTT: The Web Video Text Tracks Format
w3c.github.io
* UTF-8 형식의 텍스트 파일
자막 처리의 예 <익스플로러기준>
<video src="video track.mp4"
controls autoplay loop>
<track src="video track.vtt" kind="subtitles"
srclang="ko" label="예제 자막 표시" default>
</video>
* 다중 트랙의 사용
default 속성을 사용해서 하나의 트랙을 기본으로 지정
- 여러 트랙을 사용하는 경우, 사용자가 언어를 지정/ 선택하지 않는 경우를 대비해야 함
<video controls autoplay loop>
<source src="video_track.mp4" type="video/mp4">
<track src="video_ko.vtt"srclang="ko"
label="한국어"kind="subtitles"default>
<track src="video_en.vtt"srclang="en"
label="영어"kind="subtitles"default>
</video>'WEB > HTML' 카테고리의 다른 글
| HTML - <form> 태그 (0) | 2021.04.15 |
|---|---|
| 태그 활용 (0) | 2021.04.14 |
| HTML 태그 정리 (0) | 2021.04.14 |
| 테이블 콘텐트 그룹핑과 열 단위 스타일 지정 (0) | 2021.04.13 |
| 셀 병합과 요소 배치 (0) | 2021.04.13 |
