[HTML] 10. video태그 & audio태그

Mar 06, 2025

Contents


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video width="300" height="300" controls autoplay muted loop> <!--autoplay 자동재생 muted 음소거 loop 반복-->
        <source src="/ch02/hello.mp4">
    </video>

    <audio controls autoplay muted loop>
        <source src="/ch02/hello.mp3">
    </audio>
</body>
</html>

💡

video태그

controls: 비디오 플레이어에 기본적인 제어 버튼(재생, 일시정지 등)을 표시.

autoplay: 비디오가 자동으로 재생되도록 설정.

muted: 비디오의 소리를 음소거 처리.

loop: 비디오가 끝나면 자동으로 반복 재생.

width, height: 비디오의 가로, 세로 크기를 지정.

💡

audio태그

controls: 오디오 플레이어에 기본적인 제어 버튼(재생, 일시정지 등)을 표시.

autoplay: 오디오가 자동으로 재생되도록 설정.

muted: 오디오의 소리를 음소거 처리.

loop: 오디오가 끝나면 자동으로 반복 재생.

width, height: 오디오는 보여지는 화면이 없기에 지정하지 않음.

See more posts

[HTML] 10. video태그 & audio태그

video태그

audio태그

More articles

[HTML] 12. 테이블을 사용하여 학교 시간표 만들기

[HTML] 11. 테이블 만들기

[HTML] 9. 아이프레임

[HTML] 8. 엔티티(Entities)