본문 바로가기

모르는개 HIML

HTML 오디오&비디오 넣는법

예제 파일 

1.mp3
6.12MB
2.mp4
5.09MB

안녕하세요 산책입니다. 오늘은 HTML에서 오디오와 비디오를 넣어보도록 하겠습니다.

 

 

atom을 실행시켜 주시고요

 

html file을 만들어주세요.

 

1. 오디오 AUDIO

 

 

HTML 오디오 넣는법

 <body>   

   <audio controls>
   <source src="1.mp3" type="audio/mpeg">
   </audio>

</body>

 

이렇게 넣어주시면 됩니다.  아주 쉽죠??

 

<audio> 태그의 속성에 대해 알아보겠습니다.

 

속성 설명
src 오디오 파일명(경로 포함) 설정
controls 화면에 플레이어 표시하기
autoplay 자동 재생
※크롬에서는 오디오의 자동 재생을 허용하지 않음
loop 무한 반복 

2. 비디오 VIDEO   

HTML 비디오 첨부

  <body>
    <video width="320" height="240" controls>  <- 넓이와, 높이를 설정해주고 화면 표시까지 해주었어요
    <source src="2.mp4" type="video/mp4">
    </video>

  </body>

 

이렇게 넣어주시면 됩니다.  아주 쉽죠??

 

<video> 태그의 속성에 대해 알아보겠습니다.

 

속성 설명
src 비디오 파일명(경로 포함) 설정
width 비디오 영상의 너비 
height 비디오 영상의 높이 
controls 화면의 플레이어 표시하기
autoplay 자동 재생
※크롬에서는 오디오의 자동 재생을 허용하지 않음
loop 무한반복 

 

오늘은 

오디오, 비디오 넣는 방법에 대해 알아보았습니다.

별로 난이도가 높지 않아서 그대로 복사 붙여 넣기 해주시면 될 거 같아요