HTML5이전에는 웹 페이지에서 오디오와 비디오를 실행시키기 위한 표준안이 없어서 플래시나 외부 플러그인에 의존했어야 했다. HTML5에서는 이러한 불편함을 해소하기 위하여 표준안을 만들었다.
audio
- <audio src="오디오위치" controls></audio>
<audio>태그를 이용하기 위해서는 controls를 반드시 삽입해야한다. 오디오를 위의 방식과 같이 삽입할 수 있지만, 브라우저마다 지원하는 오디오 타입이 다르기 때문에 다른 방식으로도 적는다.- <audio controls>
<source src="오디오위치.mp3" type="audio/mpeg">
<source src="오디오위치.ogg" type="audio/ogg">
<source src="오디오위치.wav3" type="audio/wav">
</audio>
- <audio controls>
Video
- <video src="비디오위치" controls></video>
비디오의 경우에도 브라우저마다 지원하는 타입이 다르기 때문에 다른 방식으로도 적는다.
- <video controls>
<source src="비디오위치.mp4" type="video/mp4">
<source src="비디오위치.ogv" type="video/ogv">
<source src="비디오위치.webm" type="video/webm">
</video>
- <video controls>
기타 속성
- loop
반복 재생을 설정한다. - preload="auto | metadata | none"
미디어를 언제 다운로드 할지 정하는 속성으로, auto는 페이지가 로드되는 순간 전체 미디어를 다운로드 하고, metadata는 페이지가 로드되는 순간 미디어 앞부분을 다운로드하고(기본 값), none는 재생버튼을 눌러야만 미디어를 다운로드한다. - muted
처음 로드 되었을 때 소리를 무음으로 지정한다. - autoplay
예전에 오디오에서는 muted autoplay가 가능했었으나, 현재는 이 기능은 막혔다. 비디오의 경우에는 muted autoplay를 할 경우 음소거 된 상태에서 페이지 로드되지마자 플레이 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width: 300px;
height: 500px;
background-clip:border-box;
}
video{
width: 300px;
height: 500px;
position: fixed;
z-index: -100;
}
div{
width: 250px;
position: relative;
top: 250px;
left: 30px;
text-align: center;
color: white;
background-color: rgba(161, 161, 161, 0.393);
}
</style>
</head>
<body>
<video src="./selft-study-image/mukho.mp4" controls muted autoplay loop></video>
<div>
<h2> 2024년의 여행 </h2>
<p> 혼자여행 : 묵호</p>
</div>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS의 선택자(selector) - 4. :target, :not (0) | 2024.07.07 |
|---|---|
| CSS의 선택자(selector) - 3. 가상 클래스 선택자(pseudo class)와 가상요소 선택자(pseudo element) (0) | 2024.07.07 |
| CSS의 선택자(selector) - 2. 속성선택자 (0) | 2024.07.07 |
| CSS의 선택자(selector) - 1. 하위선택자, 자식선택자, 인접선택자, 형제선택자 (0) | 2024.07.07 |
| CSS의 width와 height 속성을 알아보자 (0) | 2024.07.07 |
| CSS에서 display를 사용해서 테이블을 만들어보자 (0) | 2024.07.07 |
| CSS에서의 배치 방법 (0) | 2024.07.07 |
| CSS3의 박스모델 (0) | 2024.07.07 |