웹 페이지에서 가장 많이 볼 수 있는 오디오와 비디오를 audio 태그와 video 태그로 작성할 수 있다
🟣 audio 태그
<audio src = "audio 파일 경로" controls> </audio><audio> 태그는 src 속성과 함께 사용
src 속성값에는 삽입하려고 하는 오디오 파일의 경로를 작성
오디오 컨트롤 패널이 노출되도록 controls 속성을 설정
* audio 태그에서 지원하는 속성
- 웹 브라우저마다 지원하는 오디오 파일 포맷이 다르기 때문에 코드를 작성하기 전에 지원 여부를 확인해야함
audio 태그 사용해서 코드 작성하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> audio 추가하기 </title>
</head>
<body>
<audio src = "Camille de la Cruz - blah blah blah.mp3" controls> </audio>
<!-- 오디오 파일 출처 : https://artlist.io/ -->
</body>
</html>🔽 audio 태그 사용해서 출력 🔽
🟣 video 태그
video 태그도 src 속성을 필수로 사용
* video 태그에서 지원하는 속성
video 태그 사용해서 코드 작성하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> video 추가하기 </title>
</head>
<body>
<video src = "mydog.mp4" controls width="500px" height="500px"></video>
<!-- 비디오의 기본 사이즈가 커서 width, height로 사이즈 조절 -->
</body>
</html>🔽 video 태그 사용해서 출력 🔽
🟣 source 태그
멀티미디어 태그를 사용할 때 필수로 사용해야하는 태그는 아니지만, 되도록이면 함께 사용하면 좋은 태그
왜 좋냐? 멀티미디어 태그는 다양한 포맷을 지원하지만, 웹 브라우저별로 지원하는 포맷과 타입이 다르기 때문에 !
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> source 사용하기 </title>
</head>
<body>
<video controls> <!-- video 태그에 source 태그 사용하기 -->
<source src = "mydog.mp4" type = "video.mp4">
지원하지 않는 웹 브라우저입니다.
</video>
<audio controls>
<source src = "Camille de la Cruz - blah blah blah.mp3" type = "audio.mp3">
<!-- audio 태그에 source 태그 사용하기 -->
지원하지 않는 웹 브라우저입니다.
</audio>
</body>
</html>위 코드와 같이 작성했을 때
video 태그의 파일이 현재 웹 브라우저에 해당 파일 포맷을 지원하는지 확인한다
지원하지 않는 형식의 파일이라면 마지막에 작성한 텍스트가 사용자에게 노출된다
웹 접근성을 고려해 <source> 태그로 다양한 포맷의 멀티미디어를 등록해 두는 방식으로 사용하는 것이 좋다
공부 중. !!! !