오디오와 비디오 태그 - 바로 실행해보면서 배우는 HTML5/CSS3
learn
Practice
learn
06 멀티미디어 관련 태그
오디오와 비디오 태그

이미지를 배치해보았다면 이제 오디오와 비디오를 배치해봅시다.


오디오 태그


<audio> 태그는 HTML5에서 새로 추가되었습니다. 오디오 파일이 저장된 경로를 src(source) 값으로 설정하면, 웹 페이지에 해당 오디오 파일을 재생하는 플레이어가 추가됩니다. <audio> 태그는 아래와 같이 사용하며, 확장자의 음원 형식을 뜻하는 type 속성은 생략할 수 있습니다.


비디오 태그


video 태그는 오디오 태그와 비슷하게 사용합니다. 비디오 파일이 저장된 경로를 src(source) 값으로 설정하면, 해당 비디오 파일을 재생할 수 있는 플레이어가 웹 페이지에 추가됩니다. <video> 태그는 아래와 같이 사용하며, <video> 태그에서 또한 type 속성을 생략할 수 있습니다.

또한, <video> 태그는 <audio> 태그와 다르게 heightwidth 속성을 지정할 수 있습니다.

Practice

아래 내용을 참고하여 오디오 태그와 비디오 태그를 이용하여 웹 페이지에 플레이어를 추가한 뒤 실행해 봅시다. 불러온 멀티미디어 크기가 너무 크다면 오른쪽 상단의  아이콘을 클릭하여 창을 확대합니다.

  1. 오디오 태그로 미리 준비되어 있는 "Good_Starts.mp3"를 불러옵니다.
  2. 비디오 태그로 미리 준비되어 있는 "Particles.mp4"를 불러옵니다.
  3. 비디오 태그로 영상 크기를 조절해 봅시다.
learn
Practice
Q & A
Q&A forum that anyone can ask and answer.
Share your questions and answers with other students and grow together!
Registered Questions(0)