[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: 오디오는 보여지는 화면이 없기에 지정하지 않음.

HTML

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

백하림

Mar 06, 2025

Contents

video태그 audio태그


<!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: 오디오는 보여지는 화면이 없기에 지정하지 않음.