MARK UP/HTML

미디어 파일 Midia import(#12)

두비_ 2020. 11. 12. 21:57
반응형

미디어 파일이란 html 문서 안에 텍스트가 아닌 어떤 형테의 데이터를 집어넣는 경우를 미디어 파일이라고합니다

이미지 태그도 그림에 해당되므로 미디어 파일에 해당됩니다

 

오디오 파일을 넣을 때 사용하는 태그입니다 비디오 태그도 마찬가지입니다 <video> 를 사용합니다

1
<audio>오디오</audio>

폴더를 생성 후 안에 audios, videos 폴더를 생성해봅시다

audio 폴더 내에는 mp3, ogg, wav를 넣고 videos에는 mp4, mov를 넣어봅시다

 

아래 처럼 넣게 되면 아무것도 나오지 않으므로 오른쪽에 controls 속성을 추가합니다

1
<audio src="assets/audios/midia.mp3">오디오</audio>
1
<audio src="assets/audios/mida.mp3 controls">오디오</audio>

 

페이지에 들어가자마자 노래 재생을 하고 싶다면 autoplay를 추가합니다

*현재 최신 크롬 브라우저 기준으로 무분별한 광고로인해 autoplay 기능은 막혀있습니다 해결법이 작성된 글은 많으니 찾아보시면 금방 나올겁니다

 

type를 추가하는 방법이 있습니다 아래 코드처럼 3개를 지정해도 재생칸은 하나 밖에 없습니다 그 이유는 가끔 어느 환경에서는 mp3, wav를 지원하지 않을 수 있습니다 wav를 사용하고 싶은데 각 인터넷 버전이나 환경 때문에 재생이 되지 않을 때가 있으니 type를 지정하여 해결하게끔 할 수 있습니다

1
2
3
4
5
<audio controls>
        <source src="/assets/audios/midia.wav" type="audio/wav">
        <source src="/assets/audios/midia.mp3" type="audio/mpeg">
        <source src="/assets/audios/midia.ogg" type="audio/ogg">
</audio>