Programming/HTML CSS
1. source 사용
<audio controls="controls">
 <source src="sample.mp3" type="audio/mp3" />
 <source src="sampe.ogg" type="audio/ogg" />
</audio>

<video controls="controls">
 <source src="sampe.mp4" type="video/mp4" />
 <source src="sampe.webm" type="video/webm" />
</video>
▶ 오디오나 비디오 파일의 경우 브라우저 마다 재생할 수 있는 파일형식이 다르므로 이에 대응하기 위해 audio태그나 video태그에 source태그를 사용하여 재생할 수 있는 여러 파일 형태를 제공하도록 합니다.

위 예제에서 audio태그는 처음에 mp3 파일을 재생할 수 없는 경우 대신 ogg를 재생할 수 있도록 합니다. 대부분의 경우 mp3와 ogg를 제공하면 거의 모든 브라우저에서 음악을 재생할 수 있습니다.

2. source 속성

(1) type

이 속성이 값으로는 파일타입을 지정합니다. 예를 들어 mp3의 경우 audio/mp3 와 같이 지정하면 됩니다. 이 속성을 지정해 놓으면 브라우저에서는 파일을 실제 로드하지 않고도 지정된 형식을 통해 자신이 재생할 수 있는 파일인지를 판단할 수 있게 됩니다.

성능상 이로운 점이 있으므로 되도록 type을 지정하길 권장합니다.
0 0