HTML 모르는 태그 정리(Media Files)

IvanSelah·2021년 10월 12일

공통: autoplay 자동재생, loop 반복재생, controls 사용컨트롤

Audio

방법1

<audio src="./assets/audios/ivanselah.mp3"></audio>
방법2 (audio, video 동일)
(브라우저간 지원이 안되는 경우)
예) 크롬에서 mp3가 지원이 안되면,
    그 다음 wav라도 재생해줘,
    wav도 안되면 안내문구<p></p>

<audio>
  <source src="./assets/audios/ivanselah.mp3" type="audio/mpeg" />
  <source src="./assets/audios/ivanselah.wav" type="audio/wav" />
  <p>다른 브라우저를 사용하시는 것을 추천드립니다.</p>
</audio>

Video

방법1
<video src="./assets/videos/ivanselah.mp4"></video>

방법2
<video>
  <source src="./assets/videos/ivanselah.mov" type="video/mp4" />
  <source src="./assets/videos/ivanselah.mp4" type="video/mp4" />
  <a href="https://browsehappy.com/>브라우저 업데이트하기</a>
</video>

iframe
Youtube 동영상 처럼

profile
{IvanSelah : ["꿈꾸는", "끊임없이 노력하는", "프론트엔드 개발자"]}

0개의 댓글