[HTML 기초 08]HTML 오디오,비디오 태그

[웹프로그래밍 기초강좌 - HTML 08]

HTML 오디오태그, 비디오태그​

(HTML기초강좌 8강)

 

HTML 기초강좌 08강 오디오,비디오태그

 

 

 

 ① 오디오 태그 (audio)

 

 

- HTML5에서는 audio태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공합니다.

- HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, OGG뿐입니다.

 

 

태그	설명
audio	오디오를 생성하는 태그입니다.

 

속성	설명
src	음성파일의 경로를 지정합니다.
preload	사용자가 사용할 생각이 없더라도 음성파일을 미리 다운로드합니다.
autoplay	음성파일 자동재생여부를 지정합니다.
loop	음성파일을 반복할지를 지정합니다.
control	음성파일 재생도구를 출력할지를 지정합니다.
volume	음성파일 재생 볼륨을 설정합니다(0.0 ~1.0)
muted	음성파일을 음소거 상태로 설정합니다.

* audio 태그는 controls 설정이 되어있지않으면 아애 화면에 표시되지않습니다.

 

<예제>

  <audio src="sample_audio.mp3" controls="controls" autoplay muted> </audio>

 

<실행화면>

 

 

 

 

 

 

 

 ② 비디오 태그 (video)

 

- 웹페이지에 비디오를 보여주기위해 video태그를 사용합니다.

 

 

태그	설명
video	비디오를 삽입하는 태그입니다.

속성	설명
src	비디오 파일의 경로를 명시합니다.
height	비디오 파일의 높이를 명시합니다.
width	비디오 파일의 너비를 명시합니다.
controls	비디오의 기본적인 동작을 조절할 수 있는 패널을 명시합니다.
autoplay	비디오의 자동재생여부를 명시합니다.
loop	비디오의 반복 재생 여부를 명시합니다.
poster	비디오가 아직 준비 중일때 불러올 이미지 파일의 경로를 명시합니다.
preload	비디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시합니다.

<예제>

  <video src="sample_video.mp4" controls="controls" poster="posterimage.jpg"> </video>

 

<실행화면>