video, audio

📰 HTML 🔻/🐦 HTML-Note

video, audio

output7 2022. 1. 14. 20:36

video

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video controls autoplay muted loop preload="metadata">
      <source src="./video/bridge.mp4" type="video/mp4" />
    </video>
  </body>
</html>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video

<video>: 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN

HTML <video> 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.

developer.mozilla.org

muted: 음소거상태
autoplay: 자동재생 (muted와 함께 넣어야 동작함)
poster: 썸네일이미지
preload: 영상을 먼저 다운을 받을지 말지를 선택가능함 (auto, metadata, none 사용가능)

audio

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <audio controls>
      <source src="./audio/bass.mp3" />
    </audio>
  </body>
</html>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio

<audio> - HTML: Hypertext Markup Language | MDN

HTML <audio> 요소는 문서에 소리 콘텐츠를 포함할 때 사용합니다.

developer.mozilla.org