오디오 & 비디오 재생하기

오디오 & 비디오 재생하기 1

1. <audio> 태그 - 오디오 파일 삽입하기

• HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는 <audio> 태그를 사용합니다.
• 일반적으로 대부분의 브라우저에서 가능하면 mp3 파일을 삽입하며 ogg(또는 oga)파일은 함께 지정하지 않는 경우가 많습니다.

 

기본형 : <audio src="오디오 파일 경로" [속성] [속성="속성 값"]> </audio>

 

<audio> 태그에서 사용되는 속성

• 오디오를 배경 음악으로 사용할 경우 플레이어를 화면에 표시하지 않고 재생 버튼을 누르지 않아도 재생되도록 자동 재생(autoplay)해야 합니다. 그리고 오디오가 끝나더라도 사용자가 웹 화면에서 빠져 나갈 때까지는 계속 반복 재생(loop)해야 합니다.

속 성	설 명
autoplay	오디오를 자동 재생합니다.
controls	웹 화면에 컨트롤 막대를 표시합니다. 컨트롤 막대에는 재생/멈춤, 진행 바, 볼륨 등이 표시됩니다.
loop	오디오를 반복 재생합니다.
muted	오디오를 재생해 진행하지만 소리는 끕니다.
preload	재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해 준비해 둡니다.

 

<div class="exam1" style="width: 400px; height: 60px; border: 2px solid pink; padding: 30px">
    <audio src="https://tistory2.daumcdn.net/tistory/3344050/skin/images/music.mp3" controls></audio>
</div>

2. <video> 태그 - 비디오 파일 삽입하기

• 웹 문서에 비디오를 삽입할 때는 <video> 태그를 사용합니다.

 

기본형 : <video src="비디오 파일 경로" [속성] [속성="속성 값"]> </video>

 

 

동영상 출처 : 동물농장 

<div class="exam2" style="width: 500px; height: 300px; border: 2px solid pink; padding: 30px">
    <video src="https://tistory4.daumcdn.net/tistory/3344050/skin/images/animal_farm.mp4" controls width="500px"></video>    
</div>

3. <source> 태그 - 여러 미디어 파일 한꺼번에 지정하기

• 브라우저에 따라 지원하는 오디오 코덱이나 비디오 코덱이 다르기 때문에 한 가지 파일만 사용했을 경우, 일부 브라우저에서는 지원하지 않을 수 있습니다.
• 많은 사용자들의 브라우저 환경을 모두 고려한다면 최신 브라우저와 이전 브라우저에서 모두 재생할 수 있도록 ogv 파일도 함게 지정해 주어야 합니다.
• 이렇게 여러 형식의 비디오 파일을 함게 사용하려면 <video> 태그와 <source> 태그를 함께 사용해 여러 개의 파일을 지정해야 합니다.
• <source> 태그에는 미디어 파일의 경로를 지정하는 src 속성과 미디어 파일의 형식을 알려주는 type 속성을 사용합니다. 간단히 type 속성만 사용할 수도 있고 codecs 속성을 이용해 코덱까지 함께 표시할 수도 있습니다.

 

예제) <source src="video.ogv" type="video/ogg"; codecs='theora,vorbis'">

 

속 성	설 명
src	미디어 파일의 경로를 지정하는 필수 속성으로 파일 경로를 지정할 떄는 경로에 공백이 있으면 안 됩니다.
type	웹 브라우저가 해당 미디어 파일을 재생할 수 있는지 여부를 확인할 수 있도록 미디어 파일의 유형을 알려 줍니다.
codecs	비디오 코덱을 지정합니다.

• mp4 파일을 ogv와 webm 형식으로 변환한 후 <source> 태그를 이용해 함께 삽입한 예

<video controls>
       <source src="Music.mp4" type="video/mp4">
       <source src="Music.webm" type="video/webm">
       <source src="Music.ogv" type="video/ogg">
</video>

 

참고 : HTML5 + CSS3 웹 표준의 정석