[HTML] <audio>, <video>, <iframe> 멀티미디어 넣는 법

HTML, CSS

[HTML] <audio>, <video>, <iframe> 멀티미디어 넣는 법

hyun0907 2024. 4. 1. 00:20

1. 멀티미디어

인터넷 초기에는 웹 사이트에서의 학인을 PC를 통해서만 가능했습니다. 그래서 여러 가지 미디어 파일을 확인하기 위해서는 ActiveX를 설치해야만 볼 수 있어 불편했습니다. 그러나 HTML5에서는 ActiveX를 따로 설치하지 않아도 텍스트와 이미지, 오디오, 비디오를 웹 페이지에서 바로 볼 수 있습니다. HTML5에서 멀티미디어를 재생하는 방법에 대해 알아보겠습니다.

2. <audio> : 오디오 파일을 넣는 태그

HTML5에서는 오디오를 재생하기 위해 <audio> 태그를 사용합니다.

형태

audio 속성

속성	설명
autoplay	오디오를 자동 재생
controls	웹 화면에 재생 컨트롤 막대를 표시
muted	오디오가 재생 중이지만 소리를 끔
preload	재생 버튼을 눌러 재생 전 오디오 파일을 다운로드해 준비
loop	오디오 반복 재생

<h1>멀티미디어_오디오</h1>

3.<video>: 영상 파일 넣기

HTML5에서 영상을 실행하려면 <video> 태르를 사용합니다. <video> 태그의 형식은 다음과 같습니다.

<h1>멀티미디어_비디오</h1>

video 태그 안에 들어갈 수 있는 속성은 다음과 같습니다.

속성	설명
controls	웹 화면에 컨트롤 막대를 표시. 재생 중에는 화면에 컨트롤 막대기가 표시되지 않지만, 위로 마우스 포인터를 옮기면 컨트롤 막대가 나타남.
width	비디오 화면의 넓이 지정
height	비디어 화면의 높이 지정
loop	비디오를 반복 재생
autoplay	비디오를 자동 재생

* 브라우저에서는 자동 재생 정책이 존재합니다.

사용자 경험 향상을 위해 비디오는 음소거 상태이어야 합니다.
사용자 경험 향상을 위해 전체 화면 모드로 표시되는 비디오 플레이어가 작동하지 않아야 합니다.
자동 재생은 모바일 디바이스의 데이터 소모 및 베터리 소모가 많기 때문에 iPhone 또는 iPad의 저전력 모드에서는 작동하지 않습니다.

4. <ifram>: 웹 문서에 유튜브 영상 불러오기

iframe 태그는웹 문서 안에 다른 외부 문서를 불러올 때 사용합니다. 일반적으로 영상 파일은 <video> 태그를 이용해 불러올 수도 있지만, 운영하는 서버의 트래픽 용량이 크지 않을 경우 영상을 보려는 접속이 늘어나면 트래픽의 최대 허용치를 초과하게 됩니다. 이런 문제를 해결하기 위해 유튜브와 같은 영상 플랫폼에 업로드 후 인터넷 주소만 가져와 웹 문서에서 불러올 수 있습니다. 이때 <iframe> 태그를 사용합니다. 사용법은 다음과 같습니다. width, height 속성이 존재하며 src에 경로를 붙여넣으면 됩니다.

<iframe width="560" height="315" src="https://www.youtube.com/embed/qDqFJJVv6yY?si=BY_PXIxa5qjIZcvp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

이렇게 영상이 나오게 됩니다.