안녕하세요. 이번 시간에는 비디오, 오디오, 아이프레임 같은 멀티미디어 태그에 대해 알아보겠습니다.
많은 분들이 배경음악이나, 유튜브를 위해 멀티미디어를 웹사이트에 넣고 싶어 하십니다. HTML5는 멀티미디어를 상당히 잘 지원합니다. 코덱도 내장되어 있기 때문에 유명한 확장자들은 별도의 플러그인 없이 재생 가능합니다. HTML5의 주 모토가 플러그인들을 제거하여 자체 기능으로도 실행되게 하는 것이기 때문이죠.
비디오
먼저 비디오 태그입니다.
<video src="비디오이름.확장자" poster="포스터이름.확장자" autoplay controls loop>
<track kind="subtitles" src="자막이름.확장자" srclang="ko" label="한글자막" />
비디오를 지원하지 않는 경우 표시할 내용
</video>간단하게 비디오를 넣을 수 있습니다. poster는 비디오가 로딩되는 동안 표시할 사진 이미지입니다. HTML5에서 지원하지 않는 코덱일 경우 비디오 태그 안에 넣은 내용이 표시됩니다. autoplay 속성으로 로딩된 후 자동 재생할 지 아닐지를 선택할 수 있습니다. controls는 소리조절, 일시 정지 등의 메뉴를 표시할 지 선택하는 속성이고요. loop는 무한 반복 재생할지를 설정합니다. muted도 있는데 이 속성을 넣으면 음소거됩니다.
track 태그는 video에 대한 부가 정보를 넣는 곳인데요. 예시에서는 자막(subtitles)을 넣어주었습니다. 자막 대신에 메타데이터(metadata), 설명(descriptions), 캡션(captions), 목차(chapters)를 넣어줄 수 있습니다. kind가 track의 종류이고, src가 파일 경로, srclang이 자막이 어떤 언어인지를 나타냅니다. 참고로 자막의 확장자는 vtt여야 합니다. smi나 srt일 경우 변환기를 사용하세요.
<video>
<source src="비디오이름.webm" type="video.webm" />
<source src="비디오이름.ogg" type="video.ogg" />
</video>위와 같이 source 태그를 사용해서 여러 개의 비디오를 가리킬 수도 있습니다. 왜 여러 개의 비디오가 필요하냐면, 브라우저마다 지원하는 비디오 확장자가 다르기 때문에 다양한 확장자의 비디오 파일들을 넣어주어서 모든 브라우저에 대응하기 위함입니다.
오디오
오디오 태그도 비슷합니다.
<audio src="오디오.확장자" autoplay controls loop volume>
오디오를 지원하지 않을 경우 표시할 내용
</audio>비디오랑 거의 비슷합니다. autoplay, controls, loop, muted같은 속성도 같습니다. volume이 있는데 0.0(무음)부터 1.0(매우 큼)까지 소리 크기를 지정할 수 있습니다. 또한 audio태그의 src 대신 source 태그를 사용해 여러 파일을 지정할 수도 있고, track 태그로 부가적인 정보를 넣을 수 있습니다. 비디오랑 거의 동일합니다.
아이프레임
비디오나 오디오를 제외한 다른 것들을 넣을 때 사용합니다. 주로 다른 HTML 파일을 넣곤 합니다. 하지만 비디오랑 오디오를 넣을 수도 있긴 합니다. (HTML5에서 video랑 audio 태그가 도입되기 전에는 아이프레임을 통해서 넣곤 했습니다). 유튜브는 iframe을 통해서 자신들의 동영상을 넣기를 추천합니다.
<iframe width="픽셀" height="픽셀" src="웹문서 주소">
아이프레임을 지원하지 않을 경우 표시할 내용
</iframe>width랑 height를 사용해 너비와 높이를 지정해주고, src로 페이지의 uri를 넣어주면 그 공간 안에 나옵니다. 서버사이드 언어를 배우지 않은 사람들이 주로 iframe을 사용해서 다른 html 페이지를 연결하곤 합니다. 단순한 html페이지를 표시하기 위해 iframe을 사용하는 것은 추천하지 않고요. 다른 웹사이트(구글 맵, 날씨 정보)를 연결해서 내 페이지 안에 표시하고 싶을 때 사용하시면 됩니다.
embed, object
두 태그는 외부의 자원을 가져오는 태그는 맞지만 사용 용도가 매우 헷갈립니다. 보통 iframe이랑 이 두 태그의 차이가 뭐냐고 많이 물어보시는데요. pdf나 svg 파일을 브라우저로 가져올 때 주로 사용합니다. 더 과거에는 ActiveX나 Java applet, Flash 등을 웹 페이지에 넣는 데 사용했습니다만, 요즘 이 세 개의 사용이 줄어들면서 역할이 축소되었습니다. object 태그는 자신의 너비에 맞게 내용물의 사이즈를 조절해줍니다. embed는 그렇지 않습니다.
다음 시간부터는 HTML5 API에 대해 알아보겠습니다. 자바스크립트 코드가 들어가기 때문에 자바스크립트를 먼저 보시고 오셔야합니다.