오디오와 비디오 태그 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 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)