HTML5 멀티미디어 요소(Multimedia Elements)
오디오 요소(Audio Element): <audio>
HTML5의 오디오 요소는 웹 페이지에 오디오 파일을 삽입할 수 있는 기능을 제공합니다. 오디오 요소는 src 속성을 사용하여 오디오 파일의 경로를 지정할 수 있습니다.
예제: 기본 오디오 요소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오디오 요소</title>
</head>
<body>
<audio src="example.mp3" controls>
브라우저가 오디오 요소를 지원하지 않습니다. (Your browser does not support the audio element.)
</audio>
</body>
</html>
비디오 요소(Video Element): <video>
HTML5의 비디오 요소는 웹 페이지에 비디오 파일을 삽입할 수 있는 기능을 제공합니다. 비디오 요소는 src 속성을 사용하여 비디오 파일의 경로를 지정할 수 있습니다.
예제: 기본 비디오 요소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>비디오 요소</title>
</head>
<body>
<video src="example.mp4" controls>
브라우저가 비디오 요소를 지원하지 않습니다. (Your browser does not support the video element.)
</video>
</body>
</html>
멀티미디어 컨트롤 속성(Multimedia Control Attributes): controls, autoplay, loop
controls: 사용자가 오디오나 비디오를 제어할 수 있는 컨트롤을 표시합니다.autoplay: 페이지가 로드될 때 오디오나 비디오가 자동으로 재생됩니다.loop: 오디오나 비디오가 끝날 때 자동으로 다시 재생됩니다.
예제: 멀티미디어 컨트롤 속성 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>멀티미디어 컨트롤 속성</title>
</head>
<body>
<audio src="example.mp3" controls autoplay loop>
브라우저가 오디오 요소를 지원하지 않습니다. (Your browser does not support the audio element.)
</audio>
<video src="example.mp4" controls autoplay loop width="400">
브라우저가 비디오 요소를 지원하지 않습니다. (Your browser does not support the video element.)
</video>
</body>
</html>
소스 요소(Source Element): <source>
소스 요소는 오디오 및 비디오 요소에서 여러 파일 형식을 지원하도록 도와줍니다. 소스 요소는 src와 type 속성을 사용하여 파일 경로와 파일 형식을 지정할 수 있습니다.
예제: 소스 요소 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>소스 요소</title>
</head>
<body>
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
브라우저가 오디오 요소를 지원하지 않습니다. (Your browser does not support the audio element.)
</audio>
<video controls width="400">
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
브라우저가 비디오 요소를 지원하지 않습니다. (Your browser does not support the video element.)
</video>
</body>
</html>
대체 콘텐츠 제공(Providing Alternative Content)
모든 브라우저가 오디오 및 비디오 요소를 지원하는 것은 아니므로, 대체 콘텐츠를 제공하는 것이 중요합니다. 대체 콘텐츠는 오디오나 비디오 요소가 지원되지 않는 브라우저에서 표시될 내용을 정의합니다.
예제: 대체 콘텐츠 제공
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>대체 콘텐츠 제공</title>
</head>
<body>
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
오디오 파일을 재생할 수 없습니다. <a href="example.mp3">여기에서 다운로드하세요.</a> (Cannot play audio file. Download it <a href="example.mp3">here</a>.)
</audio>
<video controls width="400">
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
비디오 파일을 재생할 수 없습니다. <a href="example.mp4">여기에서 다운로드하세요.</a> (Cannot play video file. Download it <a href="example.mp4">here</a>.)
</video>
</body>
</html>
HTML5의 멀티미디어 요소를 사용하면 웹 페이지에 오디오와 비디오를 쉽게 포함할 수 있습니다. 다양한 속성과 소스 요소를 활용하여 다양한 파일 형식을 지원하고, 대체 콘텐츠를 제공하여 모든 사용자가 멀티미디어 콘텐츠에 접근할 수 있도록 할 수 있습니다.