이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌9 - HTML - 2년 전 등록 / 일 년 전 수정

멀티미디어 태그

비디오, 오디오, 아이프레임
조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간에는 비디오, 오디오, 아이프레임 같은 멀티미디어 태그에 대해 알아보겠습니다.

많은 분들이 배경음악이나, 유튜브를 위해 멀티미디어를 웹사이트에 넣고 싶어 하십니다. 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>

widthheight를 사용해 너비와 높이를 지정해주고, src로 페이지의 uri를 넣어주면 그 공간 안에 나옵니다. 서버사이드 언어를 배우지 않은 사람들이 주로 iframe을 사용해서 다른 html 페이지를 연결하곤 합니다. 단순한 html페이지를 표시하기 위해 iframe을 사용하는 것은 추천하지 않고요. 다른 웹사이트(구글 맵, 날씨 정보)를 연결해서 내 페이지 안에 표시하고 싶을 때 사용하시면 됩니다.

embed, object

두 태그는 외부의 자원을 가져오는 태그는 맞지만 사용 용도가 매우 헷갈립니다. 보통 iframe이랑 이 두 태그의 차이가 뭐냐고 많이 물어보시는데요. pdf나 svg 파일을 브라우저로 가져올 때 주로 사용합니다. 더 과거에는 ActiveX나 Java applet, Flash 등을 웹 페이지에 넣는 데 사용했습니다만, 요즘 이 세 개의 사용이 줄어들면서 역할이 축소되었습니다. object 태그는 자신의 너비에 맞게 내용물의 사이즈를 조절해줍니다. embed는 그렇지 않습니다.

다음 시간부터는 HTML5 API에 대해 알아보겠습니다. 자바스크립트 코드가 들어가기 때문에 자바스크립트를 먼저 보시고 오셔야합니다.

목록
투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

아직 댓글이 없습니다.