[html/css] 멀티미디어 태그 / audio, video, iframe

HTML5
멀티미디어 파일

멀티미디어 파일은 이미지, 동영상, 오디오 등의 파일들을 말한다.

인터넷 초기에는 멀티미디어 파일을 직접적으로 재생할 수 없었기 때문에 플러그인 프로그램을 사용했다. 

미디어를 시청하기 위해 플러그인 파일들을 다운로드 해야했고, 이러한 과정에서 바이러스 등 여러 문제가 발생했다. 

W3C에서는 플러그인 없이도 미디어를 재생하기 위해 멀티미디어 태그를 웹 표준 태그로 정의했다.

멀티미디어 파일은 inline-block 속성이다.

 

W3C란? (설명 링크 클릭)

---

<audio> 태그

<audio>는 오디오를 재생시키는 태그이다.

/* 기본형 */
<audio src="오디오경로" 속성 속성></audio>

속성 종류
autoplay	오디오를 자동으로 재생한다.
controls	오디오 컨트롤 바를 표시한다.
muted	음소거
preload	재생 버튼을 눌러 재생하기 전, 오디오 파일을 다운로드하여 준비한다.
loop	반복 재생

 

audio는 속성명과 속성값이 같다. 그렇기 때문에 태그 뒤에 속성명만 적으면 된다.

controls 는 기본적으로 아래 사진과 같은 창을 만들어 주기 때문에 속성을 적지 않으면 브라우저에서 보이지 않는다.

 

audio 태그 사이에 적는 텍스트는 브라우저에서 지원이 안될 경우 보여줄 내용이다.

/* 브라우저에서 오디오가 재생이 안될 경우 */
<audio src="오디오경로" 속성>
이 음원은 해당 브라우저에서 지원하지 않습니다.
</audio>

---

<video> 태그

<video> 태그는 비디오를 재생시켜주는 태그이다.

/* 기본형 */
<video src="경로" 속성></video>

속성 종류
autoplay	비디오를 자동으로 재생한다. * 동영상을 자동 재생하려면 muted(음소거) 속성이 함께 쓰여야한다.
controls	비디오 컨트롤 바를 표시한다.
muted	음소거
preload	재생버튼을 눌러 재생하기 전에 비디오 파일을 다운로드하여 준비한다.
① none : 재생버튼을 눌러 재생하기 전에 비디오 파일을 다운로드하여 준비한다.             ② metadata : 미디어 파일 전체를 다운로드 하지 않고 메타 정보만 다운로드한다.             ③ auto : 기본값. 사용자가 즉시 이용할 수 있도록 web 문서를 로드할 때마다 미디어 파일도 다운로드한다.                            만약, preload에서 속성값 없이 쓰면 자동으로 auto 값으로 기본 설정된다.
Loop	반복재생
poster	사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소를 출력하는 속성이다. 이 속성이 없으면, 미디어를 사용 가능하게 될 때까지 아무것도 출력되지 않는다.
type	웹 브라우저가 해당 파일을 재생 할 수 있는지 확인하도록 해당 파일의 유형을 알려주는 속성이다. 브라우저에 따라 지원하는 코덱이 다르기 때문에, 한가지 형식만 사용했을 경우 일부 오래된 브라우저에서 는 작동하지 않을 수 있다. 이렇게 다양한 형식의 비디오 파일을 지정할 경우 <video> 태그와 <source> 태그를 함께 사용해 작성하며, <source> 태그에서는 src속성과 type 속성을 명시한다. 만약 <source> 태그에서 type 속성을 명시하지 않으면? 웹 브라우저가 재생이 가능한 파일인지 확인하므로 트래픽이 낭비된다. [기본형] <video><source src="비디오링크" type="video/확장명" /></video>
width, height	영상의 크기를 설정한다. 태그에 직접적으로 크기를 지정할 경우 기본적으로 px 단위로 지정되어 있으며 작성할때 단위 없이 숫자만 적는다. 만약 %같이 특정 단위를 쓸 경우에는 단위도 함께 작성한다.

 

속성은 나열하는 방식은 아래와 같다.

/* 비디오 태그 예시 */
    <video src="이미지경로" controls preload="metadata" autoplay muted width="500">
      이 영상은 해당 브라우저에서 지원하지 않습니다.
    </video>

 

만약, 동영상은 한개만 보여주고 싶지만 확장자가 여러개일 경우에는 아래와 같이,

<video> 태그 안에 <source src="이미지경로/>로 여러개를 넣어주면 된다. 

/* 동영상은 한 개지만 확장자가 여러 개일 경우 */
    <video>
      <source src="이미지경로.mp4" type="video/mp4"/>
      <source src="이미지경로.webm" type="video/webm"/>
      <source src="이미지경로.ogg" type="video/ogg"/>
      이 영상은 해당 브라우저에서 지원하지 않습니다.
    </video>

예시 화면

 

+) 비디오를 자동으로 재생하려고 한다면(autoplay) 브라우저가 이를 다운로드 해야하기 때문에, preload 속성이 autoplay 속성보다 우선시 된다.

 

참고

https://developer.mozilla.org/ko/docs/Web/HTML/Element/video

<video>: 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN

---

<iframe> 태그

iframe 태그는 inline frame의 약자로,

해당 웹 페이지 안에 다른 html 파일을 불러와서 삽입하는 기능이 있는 속성을 말한다. 

/* 기본형 */
<iframe src="링크주소" width="숫자", height="숫자"></iframe>

 

아래는 Youtube 공유하기에서 iframe 으로 공유하는 방법이다.

 

현재 여러 문제 때문에 iframe 방식이 권장되고 있지 않지만,

위와 같이 영상을 유튜브에서 가져오거나 광고 등을 게시할 때 많이 사용된다.

 

iframe 관련 참고하면 좋을 사이트

https://coding-factory.tistory.com/892

[Html] iframe 태그 사용법 & 예제 총정리