html 기초 정리 - (4) Media 파일

frenchkebab·2021년 10월 18일

김버그 - html은 재미있다 강의 정리

목록 보기

4/29

Media file (오디오, 비디오)

1. audio 태그

audio 태그 사용 방법1

<!-- audio 사용 방법1 -->
<audio
  src="./assets/audios/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp3"
  controls
  autoplay
  loop
></audio>

<속성>
1. controls : 볼륨 조절, 구간 조절 등의 기능을 사용할 수 있음.
2. autoplay : 해당 창이 로드되면서 자동으로 재생
3. loop : 재생이 끝나면 자동으로 처음으로 돌아가 재생

audio 태그 사용 방법1

<!-- audio 사용 방법2 -->
<audio>
  <source
    src="./assets/audios/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp3"
    type="audio/mp3"
  />
  <!-- mp3를 지원하지 않는 브라우저를 위해 wav 파일을 추가 -->
  <source
    src="./assets/audios/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp3"
    type="audio/wav"
  />
  <!-- 다 안되면 아래의 p태그를 보여줌 -->
  <p> 당신의 브라우저를 버리고 크롬을 사용하시는게 어떨까요? </p>
</audio>

브라우저에 따라 특정 확장자를 지원하지 않는 경우를 위해 여러가지의 source파일을 넣어줌
caniuse.com 에서 브라우저 지원 여부를 확인할 수 있다!

2. video 태그

기본적으로 audio와 동일하게 사용할 수 있다.

video 태그 사용 방법1

<!-- video 사용 방법1 -->
<video
  src="./assets/videos/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4"
  controls
></video>

속성 사용도 audio와 동일하게 하면 된다.

video 태그 사용 방법2

<!-- video 사용 방법2 -->
<video autoplay loop controls>
  <source
    src="./assets/videos/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4"
    type="video/mp4"
  />
  <source
    src="./assets/videos/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mov"
    type="video/mp4"
  />
  <p> 브라우저를 크롬으로 바꾸는게 어떨까요? </p>
  <a href="https://browsehappy.com">브라우저 업데이트 하기</a>
</video>

3. iframe 태그

html 문서 안에 다른 html 문서를 embed하고 싶을 때 사용한다.
(직접 작성할 일은 거의 없음)

예시

<iframe src="https://velog.io/@frenchkebab" frameborder="0" width="560" height="315"></iframe>

<!-- 보통 아래와 같이 복붙하여 사용 -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/roEjyglmMY8"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>