14. HTML 이론 ( 오디오, 비디오, 미디어, 파일, Media, File, audio, video, source )

media file 은 무엇일까?

​

HTML 문서 안에 text 가 아닌

어떤 다른 형태의 데이터를 집어넣을 때

media file tag 들을 사용한다.

​

앞서 알아본 img tag도

media file tag 라고 할 수 있다.

​

img tag를 제외하고

audio tag와 video tag를 배워보자.

​

첫번째는 audio tag 를 알아보겠다.

​

사용 방법이 img tag 와 매우 유사하다.

​

attr 으로 src="파일 경로"를 작성해 주고

저장하면 아무것도 나타나지 않는다.

​

재생 버튼과 볼륨 조절 버튼을

보이게 하고 싶다면

controls를 작성하면 된다.

 

<audio src="파일 경로" controls></audio> 
//컨트롤러 만들기

<audio src="파일 경로" controls muted></audio> 
//컨트롤러는 보여주고 음소거 상태

<audio src="파일 경로" autoplay></audio>
//컨트롤러는 보여주지않고 자동재생하기

<audio src="파일 경로" loop autoplay></audio>
//컨트롤러는 보여주지않고 반복 자동재생하기

 

 

위 코드처럼 사용한다면

연습에는 문제가 없을 수 있지만

브라우저마다 지원하는

audio 확장자가 다르기 때문에

여러 가지 확장자를 같이 넣어야 한다.

​

아래 코드와 같이 작성하는 것이 좋다.

 

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>

 

두번째 video tag는

audio tag랑 완전 똑같다.

 

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

 

참조

audio

https://www.w3schools.com/tags/tag_audio.asp

​

video

https://www.w3schools.com/tags/tag_video.asp