Coding/HTML
HTML5와 멀티미디어 : 웹과 멀티미디어 / 오디오 & 비디오 재생하기
찡콩찡
2022. 5. 9. 14:27
웹과 멀티미디어
: HTML4까지는 웹 브라우저에서 멀티미디어를 직접 재생할 수 없기 때문에 플러그인 프로그램 연결해서 사용
<objext> <embed>외부 파일 삽입
웹 브라우저에서 직접 재생할 수 없는 자바 애플릿이나 PDF,플래시 무비 등 삽입
<object data="경로" type="유형" name="이름" width="너비" heig="높이"> </object>
<object> 태그를 지원하지 않는 브라우저에서는 embed태그 사용!
<embed src="경로" type="유형" width="너비" height="높이">
오디오 & 비디오 재생하기
<audio>태그
1. 배경 음악이나 효과음 등 오디오 재생
2. 대부분 브라우저에서 mp3 지원하므로 mp3 파일만 사용
<audio src="오디오 파일 경로" [속성] [속성="속성 값]></audio>
| 속성 | 설명 |
| autoplay | 오디오를 자동 재생합니다. |
| controls | 웹 화면에 컨트롤 막대를 표시합니다. 컨트롤 막대에 재생/멈춤,진행,바 ,볼륨 표시 |
| loop | 오디오를 반복 재생합니다. |
| muted | 오디오를 재생해 진행하지만 소리를 끕니다. |
| preload | 재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해 준비해 둔다. |
오디오 코드
<!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>
<style>
.top {
width: 600px;
height: 300px;
background: url("images/bg2.jpg") no-repeat top left;
background-size: cover;
}
</style>
<body>
<audio src="media/bgsound.mp3" controls></audio>
<div class="top"></div>
</body>
</html>결과 값
<video>태그
: 웹 문서에 비디오 파일 삽입
<video src="비디오 파일 경로" [속성] [속성="속성 값]> </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>
<style>
body {
margin-top: 20px;
margin-left: 50px;
}
</style>
</head>
<body>
<video src="media/Painting.mp4" controls></video>
</body>
</html>결과 값
<source>태그
사용자들의 브라우저 환경을 고려해서 최신 브라우저와 이전 브라우저에서 모두 재생할 수 있도록 여러 코덱의 파일함께 지정
| 속성 | 설명 |
| src | 미디어 파일의 경로를 지정하는 필수 속성으로 파일 경로를 지정할 때는 경로에 공백이 있음 안됨 |
| type | 웹 브라우저가 해당 미디어 파일을 재생할 수 있는지 여부를 확인할 수 있도록 미디어 파일의 유형을 알려줌 |
| codecs | 비디오 코텍을 지정합니다. |
비디오 삽입 및 자막 코드
<!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>
<style>
body {
margin-top: 20px;
margin-left: 50px;
}
</style>
</head>
<body>
<video controls>
<source src="media/Painting.mp4" type="video/mp4"></source>
<source src="media/Painting.webm" type="video/webm"></source>
<track src="media/Painting.vtt" srclang="ko" label="Korean" default>
</video>
</body>
</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>
<style>
#container {
position: relative;
text-align: center;
margin-top: 30%;
margin-left: 30%;
}
h2 {
font-size: 2em;
}
h1 {
font-size: 3.5em;
}
a:link, a:visited {
text-decoration: none;
color: #222;
}
a:hover {
cursor: pointer; /*커서를 가져다 대면 pointer로 변해랏*/
}
#bg {
position: fixed;
left: 0;
top: 0;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
z-index: -100;
background: url(images/flame.jpg) left top no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<video src="media/flame.mp4" autoplay loop muted poster="images/flame.jpg"id="bg"></video>
<div id="container" >
<h2>사람을 구체적으로 도와주는 책</h2>
<h1><a href="http://www.easyspub.co.kr">이지퍼블리싱</a></h1>
</div>
</body>
</html>
코드 결과
