[HTML] media files

audio video

 

오디오와 비디오 넣는 법 

 

폴더 내에 오디오와 비디오를 잘 넣어주자.

 

<audio src="./assets/audios/kimbug.mp3"></audio>

기본은 이렇게 작성한다. 

폴더 안에 audios 파일을 넣어주고 경로를 잘 작성해준다.

하지만 위처럼 작성하면 html 파일을 열었을 때 아무것도 눈에 보이는 게 없다.

 

 

 

 

<audio src="./assets/audios/kimbug.mp3" controls></audio>

플레이버튼과 음량조절이 보이는 걸 만들기 위해서는 controls 속성을 적어줘야 한다. 

 

 

 

 

<audio src="./assets/audios/kimbug.mp3" autoplay></audio>
<audio src="./assets/audios/kimbug.mp3" loop autoplay></audio>

autoplay : 페이지 로드시 한 번 재생

loop autoplay : 페이지 로드 후 무한 재생 

 

 

 

 

    <audio controls>
        <source src="./assets/audios/kimbug.mp3" type="audio/mpeg">
        <source src="./assets/audios/kimbug.ogg" type="audio/ogg">
        <source src="./assets/audios/kimbug.wav" type="audio/wav">
    </audio>

또한 audio안에 src를 적는게 아니라 audio 태그 안에 source 태그를 적어 그 안에 src를 작성하는 방법도 있다.

이 방법과 위 방법의 차이점이 있다. 

 

위 

source를 한 개만 넣을 수 있다. 

 

 

밑

source를 여러 개 넣을 수 있다.

 

여러개 넣는 이유는? 

사람마다 브라우저 환경이 다른데 각 브라우저마다 지원이 되지 않는 것이 있기 때문에 첫 번째가 안 되면 두 번째 소스가, 두 번째가 안 되면 세 번째 소스를 순차적으로 보여주기 위함이다.

 

 

 

 

 

그리고 audio와 video는 속성이 거의 유사하다. 

<video src="./assets/videos/kimbug.mov" controls></video>
<!-- 기본 방법 -->

<video controls>
	<source src="./assets/videos/kimbug.mov" type="video/mp4" />
	<source src="./assets/videos/kimbug.mp4" type="video/mp4"/>
</video>
<!-- 여러개 넣는 방법 -->

 

 

 

 

iframe

<iframe width="560" height="315" src="https://www.youtube.com/embed/UbWERZkX2Po?si=uMlRRfR1tx3e5DPY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

또 다른 html문서를 임베드하고 싶을 때 사용하는 것이다.

유튜브 그 외 다른 사이ㅣ트에 있는 것들을 가져올 때 사용하는 것이다. 

밑 영상은 ifame으로 가져온 영상이다.