Media

이종현·2020년 12월 2일
0

HTML

목록 보기
8/8

Media

<audio src="" controls></audio>
<video src="" controls></video>
<!-- iframe -->
<!-- 임베디드 할 때 -->
<iframe src="https://edu.goorm.io" frameborder="0"></iframe>

*attribute
controls = audio 컨트롤러
autoplay = 자동재생
loop autoplay = 무한 반복 재생

예제

<!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>
        <!-- 오디오 -->
        <!-- 속성 -->
        <!-- 
            controls => 미디어 버튼 생성
            autoplay => 자동재생
            loop autoplay => 반복재생  
        -->
        <audio src="assets/kimbug.mp3" controls></audio>
        <!-- <audio src="../smaple/kimbug.mp3" autoplay></audio> -->

        <!-- 사용자가 어떤 브라우저를 사용하기 모르기 때문에  -->
        <audio controls>
            <source src="../smaple/kimbug.wav" type="audio/wav" />
            <source src="../smaple/kimbug.mp3" type="audio/mpeg" />
            <source src="../smaple/kimbug.ogg" type="audio/ogg" />
        </audio>

        <!-- 비디오 -->
        <!-- 속성 -->
        <!-- 오디오와 동일 -->
        <video src="../smaple/kimbug.mov" controls></video>

        <video controls>
            <source src="../smaple/kimbug.mov" type="video/mp4" />
            <source src="../smaple/kimbug.mp4" type="video/mp4" />
        </video>

        <!-- iframe -->
        <!-- 임베디드 할 때 -->
        <iframe src="https://edu.goorm.io" frameborder="0"></iframe>
    </body>
</html>
profile
꿈 을 코딩하자

0개의 댓글