HTML - 영상(음악) 넣기

영상이나 음악을 웹 사이트에 삽입하는 몇 가지 방법이 있습니다. <object>, <embed>, <video>, <audio> 가 그것입니다.

<object>태그

<object>태그는 익스플로어 브라우저 전용 태그입니다. 지금은 거의 사용하지 않습니다.

<object src="음악주소">

영상은 다음과 같습니다.

<object data="영상주소" type="파일 유형" name="오브젝트 이름"
        width="크기" height="크기">

<object data="movie/scrap.swf" type="application/x-shockwave-flash"
       name="movie" width="300" height="270">

<embed>태그

이 태그는 원래 넷스케이프 전용 태그였는데, 지금은 HTML 표준으로 받아 들여졌습니다.

embed 태그는 bgsound 태그와는 달리 실시간 방식으로 음악을 재생합니다.

<embed src="음악주소">

다음 속성을 사용할 수 있습니다.

속 성	설 명
src	음악, 동영상, 플래시가 위치하는 경로
align	정렬 방법. left | right
loop	영상을 계속해서 반복 재생할 것인지 지정. true | false | -1 중 하나. true 나 -1은 반복 재생.
hidden	실행되는 영상이나 음악 플레이어를 보여줄지를 결정 true | false 중 하나. true 는 플레이어를 감춤.
width	가로 크기
height	세로 크기
autostart	웹 페이지에 접속했을 때 자동으로 실행할 것인지를 결정 true | false | 1 | 0 중 하나 true 나 1 로 설정하면 자동 실행됩니다.
showstatusbar	상태표시줄을 보이도록 할 것인지 설정 true | false | 1 | 0 중 하나. true 나 1 로 설정하면 상태표시줄을 보여 줍니다.

리얼플레이어 파일을 사용하는 방법은 다음과 같습니다.

<embed src="리얼오디오파일주소" type="audio/x-pn-realaudio-plugin"
                 height="수치" height="수치" controls="제어판 옵션">

<a href="리얼 음악주소" target="new"> 링크 </a>

이 태그는 일단 음악파일을 전체 다운로드 한 뒤 다운로드가 끝나면 재생을 시작합니다. 따라서 비교적 용량이 작은 mid 나 wave 파일을 주로 사용합니다.

<video>, <audio> 태그

오디오는 <audio>태그를 이용합니다. 형식은 다음과 같습니다.

<h3>Organ</h3>
<audio src="sound/organ.mp3" controls>
      <p>이 브라우저는 오디오를 재생할 수 없습니다.</p>
</audio>

비디오는 <video>태그를 사용합니다. video 태그는 audio 태그와 동일하게 동작하며, 크롬, 파이어폭스, 사파리, 아이폰, 안드로이드, 익스플로어9에 플러그인이 없어도 비디오를 재생할 수 있는 장점이 있습니다.

<h3>Movie</h3>
<video src="video/tazan.mp3" controls>
   <p>이 브라우저는 video를 재생할 수 없습니다.</p>
</video>

<video>태그와 <audio>태그는 거의 동일하게 속성을 이용할 수 있기 때문에 아래 표를 참고합니다.

태 그	속 성	설 명
<video>, <audio>	loop	영상(음악)을 반복 재생할 것인지를 설정
	controls	컨트롤 막대를 표시합니다.
	autoplay	영상(음악)을 자동 재생할지를 설정
	muted	영상(음악)을 재생하지만 소리를 끔
	poster	영상이 재생되기까지 대신 표시할 이미지 URL
	preload	파일 다운로드 여부 none : 파일을 미리 다운로드하지 않고, 재생 버튼을 눌렀을 때만 다운로드를 합니다. Ex.) preload = "none" metadata : 메타정보만 다운로드합니다. Ex.) preload = "metadata" auto : 사용자가 웹페이지에 접속하면 자동으로 다운로드를 진행합니다. Ex.) preload = "auto", preload
	width, height	영상 가로/세로 크기 조절
<source>	src	영상(음악) URL
	type	영상(응악) MIME 타입 type = "video/mp4" => .mp4 type = "video/webm" => .webm type = "video/ogg" => .ogv
	media	영상(음악) 미디어 쿼리를 지정
	codecs	영상(음악) 코덱 지정. 코덱은 쉼표로 여러 개 지정 가능 Ex.1) type = "audio/ogg" codecs = "vorbis" Ex.2) type = "video/ogg" codecs = "theora, vorbis"

<source>태그를 이용하면 영상이나 음악을 여러 개 지정할 수 있습니다.

영상 크기는 가로/세로 500/460, 컨트롤 막대를 표시하고, 자동 재생하도록 설정했습니다.

<h3>Movie</h3>
<video width="500" height="460" controls autoplay>
   <source src="video/tazan.mp4" type="video/mp4">
   <source src="video/shazam.mp4" type="video/mp4">
   <p>이 브라우저는 video를 재생할 수 없습니다.</p>
</video>

<audio>태그도 이와 비슷하게 지정할 수 있습니다.

<h3>Organ</h3>
<audio id='organ' controls loop>
   <source src="sound/organ.mp3" type="audio/mpeg">
   <source src="sound/tarzan.mp3" type="audio/mpeg">
   <p>이 브라우저는 오디오를 재생할 수 없습니다.</p>
</audio>