지난 글에서는 웹 문서에 이미지를 삽입하는 방법을 알아보았는데, 이번에는 영상, 음성, 플래시 파일과 같은 멀티미디어 개체를 삽입하는 방법을 알아보겠습니다.
01. <embed>태그
설명
외부 응용 프로그램이나 플러그인에 대한 컨테이너를 정의합니다.
동영상, 음악, 플래시 등의 멀티미디어의 삽입이 가능하며 종료 태그 없이 사용합니다.
속성
속성 |
값 |
설명 |
height |
pixels |
컨텐츠의 높이 지정 |
src |
URL |
삽입할 외부 파일의 주소 지정 |
type |
media_type |
컨텐츠의 미디어 유형 지정 |
width |
pixels |
컨텐츠의 너비 지정 |
예제
1) 아무 멀티미디어 파일을 준비합니다. 저는 Pixabay에서 저작권이 없는 동영상을 다운받았습니다.
2) html 편집기로 다음과 같이 작성합니다.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <title>멀티미디어 삽입</title> <meta charset="utf-8"> </head> <body> <embed src="images/City%20-%206782.mp4"> </body> </html> | cs |
3) 저장 후 웹 브라우저를 통해 결과를 확인합니다. 동영상이 삽입되었습니다.
* 기본적으로 자동으로 실행되게 설정이 되어 있음
설명
웹 문서에서 무비 클립, 비디오 스트림과 같은 비디오를 정의합니다.
<embed>태그처럼 동영상을 삽입할 수 있다는 점은 같지만 <video>태그가 더욱 다양한 속성을 가지고 있습니다.
지원하는 형식은 MP4, WebM, Ogg 파일이며, 브라우저 종류와 버전마다 지원하는게 다르므로 잘 알아보고 사용해야 합니다.
만약 <video>태그를 지원하지 않는 경우라면, <video>와 </video>로 둘러싸인 텍스트가 브라우저 상에 표시됩니다.
속성
속성 |
값 |
설명 |
autoplay |
|
비디오가 로드된 후 자동으로 재생되도록 지정 |
controls |
|
비디오 컨트롤 표시되도록 지정 (컨트롤:재생, 일시 정지, 중지, 소리 조절 같은 기능) |
height |
pixels |
비디오의 높이 지정 |
loop |
|
비디오가 끝날 때마다 다시 처음부터 재생되도록 지정 |
muted |
|
비디오의 소리를 음소거 상태로 지정 |
poster |
URL |
비디오 로드 중 사용자에게 표시할 이미지 지정 |
preload |
auto/metadata/none |
페이지 로드 시 브라우저 상에서 비디오를 로드할건지 지정 (auto:불러옴/metadata:메타 데이터만 불러옴/none:불러오지 않음) |
src |
URL |
삽입할 비디오 파일의 URL 지정 |
width |
pixels |
비디오의 너비 지정 |
예제
위에 있는 속성들을 활용해 동영상을 삽입해보도록 하겠습니다. <body>부분에 아래와 같이 작성해줍니다.
1 | <video src="images/City%20-%206782.mp4" autoplay loop> |
이렇게 입력하면 삽입된 동영상이 자동재생, 루프하도록 하고 컨트롤 기능은 표시되지 않습니다.
03. <audio>태그
설명
웹 문서에서 음악, 오디오 스트림과 같은 사운드를 정의합니다.
지원하는 형식은 MP3, Wav, Ogg 파일이며 브라우저 종류와 버전에 따라 지원하고 있는게 약간씩 다를 수 있습니다.
만약 <audio>태그를 지원하지 않는다면, <audio>와 </audio>로 둘러싸인 텍스트가 브라우저 상에 표시됩니다.
속성들은 <video>의 속성들과 비슷합니다.
속성
속성 |
값 |
설명 |
autoplay |
|
오디오가 로드되는 즉시 자동으로 재생되도록 지정 |
controls |
|
오디오 컨트롤 표시되도록 지정 |
loop |
|
오디오가 끝나면 다시 처음부터 재생되도록 지정 |
muted |
|
오디오의 소리를 음소거 상태로 지정 |
preload |
auto/metadata/none |
페이지 로드 시 브라우저 상에서 오디오를 로드할건지 지정 |
src |
URL |
삽입할 오디오 파일의 URL 지정 |
속성 |
값 |
설명 |
src |
URL |
미디어 파일의 URL 지정 |
srcset |
URL |
<picture>에서 사용할 때 필요. 다른 상황에서 사용할 이미지 URL 지정 |
media |
media_query |
일반적으로 CSS에 정의된 미디어쿼리 수락 |
sizes |
|
다양한 페이지 레이아웃에 대한 이미지 크기 지정 |
type |
MIME-type |
MIME 유형을 지정 (media_type) |
* 일반적으로 type 속성으로 비디오는 "video/ogg", "video/mp4", "video/webm"을, 오디오는 "audio/ogg", "audio/mpeg" 값을 입력해줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <title>멀티미디어 삽입</title> <meta charset="utf-8"> </head> <body> <audio controls autoplay> <source src="images/Kalimba.mp3" type="audio/mpeg"> <source src="images/Kalimba.ogg" type="audio/ogg"> </audio> </body> </html> |
두 개의 소스 파일에서 삽입된 두 개의 오디오 파일 중에, 브라우저는 지원하는 파일을 선택해 브라우저 상에서 재생되도록 합니다. (크롬과 파이어폭스, 오페라는 3가지 형식을 모두 지원합니다^^) 여기서 브라우저는 첫 번째로 인식한 것을 출력합니다.
05. <track>태그
설명
미디어 요소에 대한 텍스트 트랙을 지정합니다.
미디어 재생 중에 표시되는 자막, 캡션 파일 또는 기타 텍스트 파일을 지정할 수 있습니다.
속성
속성 |
값 |
설명 |
default |
|
다른 트랙이 더 적절하다고 표시되지 않으면 트랙의 사용이 가능하도록 지정 |
kind |
captions/chapters/descriptions/ metadata/subtitles |
텍스트 트랙의 종류 지정 |
label |
text |
텍스트 트랙의 제목 지정 |
src |
URL |
트랙 파일의 URL 지정. (필수 속성) |
srclang |
language_code |
텍스트 데이터의 언어 지정 (kind="subtitles" 이면 필수 속성) |
* captions : 대화/음향 효과의 번역 정의
chapters : 장 제목 정의
descriptions : 비디오 컨텐츠의 텍스트 설명 정의
metadata : 스크립트에서 사용되는 컨텐츠 정의
subtitles : 비디오 자막 표시에 사용되는 자막 정의
예제
<body>태그 안에 다음과 같이 써주었습니다. 두 가지 언어로 된 자막을 넣는다는 의미입니다.
1 2 3 4 | <video controls width="480" src="images/City%20-%206782.mp4"> <track src="자막_en.vtt" srclang="en" kind="subtitles" label="English"> <track src="자막_ko.vtt" srclang="ko" kind="subtitles" label="Korean"> </video> |
동영상 오른쪽 하단에 새로운 아이콘이 하나 생겼습니다.
눌러 보면 이런 창이 생깁니다. 자막을 설정할 수 있습니다.
'프로그래밍 > 웹표준' 카테고리의 다른 글
| 12. <table>태그로 표 만들기 (0) | 2017.02.03 |
|---|---|
| 11. 내부 프레임 <iframe> (0) | 2017.01.23 |
| 9. 이미지맵 설정하기 <map>, <area> (0) | 2017.01.17 |
| 8. 문서 연결 태그 <a>태그 (0) | 2017.01.15 |
| 7. 이미지 삽입 태그 <img> (0) | 2017.01.13 |
댓글,
