video & audio
1. video
과거에는 동영상을 플래시 플레이를 기반으로 개발하였습니다. 이후 플래시를 대체하여 영상을 삽입할 수 있는 video 태그가 탄생한 후, 현재는 비디오 태그를 사용하여 동영상을 재생하는 것이 당연한 것이 되었죠. 웹에서 영상을 볼 수 있게 되면서, 유튜브, 넷플릭스와 같은 미디어 플랫폼의 시대로 발전했다고 할 수 있습니다.
-
video 태그의 속성
autoplay
: 동영상 자동 재생controls
: 재생, 정지 등 조작 메뉴 노출loop
: 동영상 반복 재생poster
: 동영상 재생 전에 보여 줄 이미지preload
: 페이지를 열 때 어떻게 미리 로드할지를 제어none
: 비디오 파일을 미리 로딩하지 않습니다. 서버가 최소한의 트래픽을 유지하며 페이지 로딩이 좀 더 빨라집니다.metadata
: 비디오 파일을 미리 로딩하지 않지만 파일의 메타데이터(예를 들어서 영상의 길이)를 미리 가져오도록 합니다.auto
: 비디오 파일을 미리 로딩하여 사용자가 바로 영상을 볼 수 있도록 준비합니다.
src
: 동영상 주소<track>
:<audio>
혹은<video>
요소의 자식으로 자막과 같은 시간 기반 텍스트 데이터(텍스트 트랙)를 보여주고자 할 때 사용합니다.kind
: 텍스트 트랙의 종류를 지정합니다. subtitles(자막), captions(설명) 등을 지정할 수 있습니다.srclang
: 텍스트 트랙의 언어를 지정합니다.label
: 텍스트 트랙의 제목을 정합니다.
<video src="batman.mp4" width="450" height="300" controls autoplay loop ></video>
<video src="batman.mp4" width="450" height="300" controls autoplay loop ></video>
1.1 source
-
<video>
또는<audio>
태그 내에서 여러 미디어 파일을 지정하여 브라우저가 지원하는 형식을 선택하여 재생할 수 있도록 합니다. -
type
: 동영상 타입 -
다음과 같은 코드를 사용하면 크로스브라우징과, 좀 더 사용자 친화적인 비디오를 구현 할 수 있습니다.
<video controls poster="batman.jpeg" preload="auto" width="450" height="300">
<source src="batman.mp4" type="video/mp4" />
<source src="batman.ogv" type="video/ogg" />
<source src="batman.webm" type="video/webm" />
<track kind="subtitles" src="foo.en.vtt" srclang="ko" label="batman" />
</video>
<video controls poster="batman.jpeg" preload="auto" width="450" height="300">
<source src="batman.mp4" type="video/mp4" />
<source src="batman.ogv" type="video/ogg" />
<source src="batman.webm" type="video/webm" />
<track kind="subtitles" src="foo.en.vtt" srclang="ko" label="batman" />
</video>
2. audio
<audio>
는 웹 페이지에 오디오 컨텐츠를 포함할 때 사용합니다.
- audio 태그가 공식적으로 지원하는 표준 오디오 파일 :
MP3
WAV
Ogg
- audio 태그의 속성
src
: 파일의 경로 명시controls
: 기본적인 동작을 조절하는 패널 명시autoplay
: 자동 재생 여부 명시loop
: 반복 재생 여부 명시preload
: 파일의 내용을 모두 불러올지 여부 명시
<audio>
요소 역시 <source>
요소를 자식으로 사용할 수 있습니다. 다른 요소와 마찬가지로 크로스 브라우징을 위해 여러 포맷의 파일을 지원할 수 있습니다.
<audio controls>
<source src="flow.ogg" type="audio/ogg" />
<source src="flow.mp3" type="audio/mpeg" />
</audio>
<audio controls>
<source src="flow.ogg" type="audio/ogg" />
<source src="flow.mp3" type="audio/mpeg" />
</audio>
💡 autoplay 자동재생
페이지가 로드되자마자 예상치 못한 소리가 나거나, 영상이 재생되어 불쾌해진 경험이 있나요? 이처럼 오디오/비디오를 자동 재생하는 것은 사용자에게 좋은 경험이 아닐 수도 있습니다! 해당 속성은 가능한 한 지양하는게 좋습니다. 몇몇 브라우저들은 이런 자동재생을 막고 있기도 합니다. 하지만 영상, 음악 관련 웹사이트라면 자동재생이 필요할 수 있겠죠? 자세한 내용은 참고 문서를 확인해보세요
미디어 및 Web Audio API 자동 재생 가이드 - Web media technologies | MDN