HTML video, audio

HTML에 동영상이나 음악을 넣는 법을 알아보자

video 넣는 방법

1. video 태그에 경로 작성

<video src="videos/bridge.mp4" controls></video>

<audio src="videos/bass.mp3" controls muted></audio>

2. source 태그 따로 빼서 경로 넣기

여러 형식의 파일 올림으로써 호환성을 높일 수 있다. 앞에 적은 경로의 파일을 브라우저가 지원 안할 시 대비해 다른 형식 파일 올릴 수 있다. 작은 용량의 파일부터 적는 것이 좋다.

<video controls poster="videos/thumb.jpg" width="500px" loop autoplay muted>
  <source src="videos/bridge.mp4" type="video/mp4" />
</video>

<audio controls muted>
  <source src="videos/bass.mp3" />
</audio>

옵션

video 태그에 여러 옵션들을 같이 넣어줄 수 있다.

controls : video나 audio 넣을 시 꼭 같이 넣어줘야 재생된다.
autoplay : 자동재생. 크롬의 경우 muted와 같이 적어줘야 적용된다.
loop : 무한반복
preload : 내 하드에 동영상을 저장할 건지 설정할 수 있다. auto로 설정하면 영상 내 컴퓨터에 저장되므로 해당 사이트 재방문 시 로드 시간 줄일 수 있다.
auto, none, metadata (영상 자체에 관한 데이터, 동영상 길이 등)

poster : 동영상의 썸네일 설정할 수 있다. 사이즈조절은 width~

<video controls poster="videos/thumb.jpg" width="500px" loop autoplay muted>