JunO3O
미디어 태그
미디어 태그
2023. 3. 21. 03:00ㆍHTML
미디어 태그
# img, audio, video 태그
ㅁ 이미지, 오디오, 비디오 등 멀티미디어를 넣는 방법으로 미디어 태그를 사용한다.
ㅁ img 태그는 이미지를 삽입할 때 사용하는 태그입니다.
ㅁ audio 태그는 음악을 삽입할 때 사용하는 태그입니다.
ㅁ video 태그는 비디오를 삽입할 때 사용하는 태그입니다.
ㅁ img 태그는 내용물을 가질 수 없는 태그이지만, audio 태그와 video 태그는 내용물을 가질 수 있는 태그입니다.
| 태그 | 속성 | 설명 |
| img 태그 | src | 이미지의 경로 지정 |
| alt | 이미지가 없을 때 나오는 글자 지정 | |
| width | 이미지의 너비 지정 | |
| height | 이미지의 높이 지정 | |
| audio, video 태그 |
src | 음악, 비디오 파일의 경로 지정 |
| preload | 음악, 비디오를 준비 중일 때 데이터를 모두 불러올지 여부 지정 | |
| autoplay | 음악, 비디오의 자동 재생 여부 지정 | |
| loop | 음악, 비디오의 반복 여부 지정 | |
| controls | 음악, 비디오 재생 도구 출력 여부 지정 | |
| video 태그 | width | 비디오의 너비 지정 |
| height | 비디오의 높이 지정 |
# 이미지 삽입하기
ㅁ 표시하고 싶은 이미지 파일을 HTML 페이지와 같은 폴더에 저장해야 표시가 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="abc.jpg" alt="풍경" width="300">
<br>
<br>
<img src="Nothing" alt="그림이 존재하지 않습니다." width="300">
</body>
</html>
# 음악 삽입하기
ㅁ 삽입하고 싶은 오디오 파일을 HTML 페이지와 같은 폴더에 저장해야 표시가 가능합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="" controls="controls"></audio>
</body>
</html>
# 브라우저 제약이 없도록 음악 삽입하는 방법
ㅁ 브라우저 마다 버전에 따라 지원하는 확장자 형식이 다르기 때문에 실행되니 않을 수도 있다.
ㅁ 이 문제를 source 태그로 해결할 수 있는데, source 태그는 audio 태그나 video 태그 내부에 입력해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio controls = "controls">
<source src="abc.mp3" type = "audio/mp3">
<source src="abc.ogg" type = "audio/ogg">
<!-- type 속성을 입력하지 않으면 웹 브라우저가 음악 파일을 다운로드한 후 재생 가능한 파일인지 확인하는 작업이 필요하므로 꼭 지정해야 한다. -->
</audio>
</body>
</html>
# 동영상 삽입하기
ㅁ 마찬가지로 삽입하고 싶은 비디오 파일을 HTML 페이지와 같은 폴더에 넣고 코드를 작성해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video controls="controls">
<source src="abc.mp4" type="video/mp4">
<source src="abc.webm" type="video/webm">
</video>
</body>
</html>
# 동영상을 불러오는 동안 다른 이미지 보여주기
ㅁ video 태그의 poster 속성을 사용해 동영상을 불러오는 동안 사용자에게 보여 줄 이미지를 지정할 수 있습니다.
ㅁ img 태그의 src 속성처럼 이미지 경로를 입력합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video controls="controls" poster="abcd.jpg" width="300">
<source src = "abc.mp4" type = "video/mp4">
<source src = "abc.webm" type = "video/webm">
</video>
</body>
</html>
