Keep going
오디오와 비디오 삽입하기 본문
다양한 멀티미디어 파일을 삽입할 때 쓰는 <obejct>, <embed> 태그
- <object> 태그는 오디오 파일뿐만 아니라 비디오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용한다.
- 웹 문서 안에 다른 문서를 삽입할 때도 사용할 수 있다.
- data 속성에 보여 줄 멀티미디어 파일을 지정하고 width, height 속성을 사용해 플레이어의 크기를 지정한다.
- <object> 태그를 사용하여 웹 문서에 PDF 파일을 삽입하면 PDF 리더가 자동으로 포함되어 보여 준다.
|
<object width="900" height="800" data="product.pdf"></object>
|
cs |
- <embed> 태그는 HTML 초기 버전부터 사용해서 대부분 브라우저에서 사용할 수 있다.
- <embed> 태그에는 src 속성을 사용해 삽입할 멀티미디어 파일을 지정한다.
- 필요할 경우 width, height 속성으로 플레이어의 너비와 높이를 지정할 수 있다.
- <embed> 태그에는 닫는 태그가 없다.
- <embed> 태그는 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 수 있다.
- HTML의 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed> 태그를 사용해서 멀티미디어 파일을 삽입한다.
|
<body>
<embed src="medias/spring.mp3">
</body>
|
cs |
웹 브라우저에서 지원하는 멀티미디어 파일의 종류
- 웹 브라우저에서 지원하는 오디오, 비디오 파일의 형식은 여러 가지가 있다.
- 이미지 파일과 마찬가지로 오디오, 비디오, 파일도 두세 가지 형식 중에 골라서 사용한다. 비디오 파일의 webm 형식은 무료이고 화질도 좋지만 webm 형식을 지원하지 않는 경우에는 mp4 형식을 사용한다. 오디오 파일은 mp3 형식을 주로 사용한다.
| 종류 | 확장자 | 설명 |
| 비디오 | mp4 | 많이 사용하는 비디오 형식으로, 라이선스가 있지만 웹에서는 무료로 사용할 수 있다. |
| webm | 화질이 우수하고 무료라서 mp4와 함께 많이 사용한다. | |
| 오디오 | mp3 | 대부분의 음원에서 사용하는 형식. 2017년 이후 라이선스가 종료되면서 무료로 사용 가능 |
| mp4, m4a | mp3의 문제점을 개선한 AAC 코덱을 사용한 파일 형식. 확장자는 mp4뿐만 아니라 m4a를 사용하기도 한다. |
오디오와 비디오 파일을 삽입하는 <audio>, <video> 태그
- 멀티미디어 파일 관련 태그는 HTML5 웹 표준이 정해지면서 가장 많이 변한 부분이다.
- HTML4 까지는 웹 브라우저에 멀티미디어 파일을 삽입한 후에 재생하려면 플러그인 프로그램이 따로 필요했다.
- 하지만 HTML 5 에서는 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생할 수 있다.
- 따라서 웹 브라우저에서 바로 멀티미디어 파일을 재생하기 때문에 브라우저마다 플레이어가 다르다. 그리고 같은 웹 브라우저가 하더라도 버전에 따라 지원 상황이 달라질 수 있다.
오디오와 비디오 파일 삽입하기
- <audio>, <video> 태그는 사용법부터 속성까지 거의 비슷하다.
- HTML에서 배경 음악이나 효과음 등 오디오 파일을 삽입할 때는 <audio> 태그를 사용하고,
- 비디오 팝입을 사용할 때는 <video>태그를 사용한다.
- 이때 오디오나 비디오 파일을 시작하거나 종료할 수 있는 컨트롤 바 속성을 함께 표시한다.
# 오디오
|
<audio src="medias/spring.mp3" controls></audio>
|
cs |
- 웹 문서에 <audio> 태그를 사용해서 오디오 파일을 삽입한 것이다.
- 방문자가 음악을 재생하거나 멈출 수 있도록 컨트롤 바를 나타내는 controls 속성을 함께 사용했다.
- 웹 브라우저에 플레이어가 표시되고 사용자가 재생 버튼을 눌러야만 오디오가 재생된다.
#비디오
|
<video src="medias/salad.mp4" controls width="700"></video>
|
cs |
<video> 태그도 비디오를 재생하거나 멈출 수 있도록 controls 속성을 함께 사용해서 삽입한다.
비디오 파일의 너빗값을 지정하지 않으면 웹 브라우저에 가득 차게 나타나므로 너빗값을 적절히 지정하는 것이 좋다.
<audio>, <video> 태그의 속성 알아보기
<audio>, <video> 태그에서 사용하는 속성은 거의 일치하다.
| 종류 | 설명 |
| controls | 플레이어 화면에 컨트롤 바를 표시한다. |
| autoplay | 오디오나 비디오를 자동으로 실행한다. |
| loop | 오디오나 비디오를 반복 재생한다. |
| muted | 오디오나 비디오의 소리를 제거한다. |
| preload | 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다. 사용할 수 있는 값은 auto, metadata, none이다. 기본값은 preload="auto" 이다. |
| width, height | 비디오 플레이어의 너비와 높이를 지정한다. width나 height의 값 중에서 하나만 지정할 경우 나머지는 자동으로 계산해서 표시한다. |
| poster ="파일 이름" | <video> 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정한다. |
- 오디오 파일을 배경 음악처럼 사용하고 비디오 파일을 자동 재생하려면 <audio>, <video> 태그에서 autoplay 속성과 loop 속성을 지정하면 된다.
- 이 때 플레이어가 보이지 않도록 하려면 controls 속성을 빼면 된다.
- 대부분의 웹 브라우저에서는 오디오나 소리가 있는 비디오 파일의 자동 재생을 금지하고 있다.
|
<audio src="medias/spring.mp3" autoplay loop></audio>
<video src="medias/salad.mp4" width="700" autoplay muted loop></video>
|
cs |
출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]
'Web Project > HTML' 카테고리의 다른 글
| 입력 양식 작성하기 (0) | 2021.02.10 |
|---|---|
| 하이퍼링크 삽입하기 (0) | 2021.02.08 |
| 이미지 삽입하기 (0) | 2021.02.07 |
| 표 만들기 (0) | 2021.02.05 |
| 목록 만들기 (0) | 2021.02.05 |