![[HTML & CSS] HTML video & audio](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVPO3a%2FbtrMkhBpd9m%2F1EpfB6bUivAc9WHtyZ6QJ0%2Fimg.png)
728x90
이전글 HTML5에 새롭게 추가된 input 속성의 연장입니다.
1. video
2. audio
1. video
<video>태그를 이용하여 표준화된 방식으로 비디오를 브라우저에 삽입할 수 있습니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>video & audio Tag</title>
<meta charset="UTF-8">
</head>
<body>
<video style="width: 500; height: 300" controls loop>
<source src="#" type="video/mp4">
<source src="#" type="video/ogg">
</video>
<video style="width: 500; height: 300" controls autoplay src="">
<source src="#" type="video/mp4">
<source src="#" type="video/ogg">
</video>
</body>
</html>
결과)
src속성 : 비디오 파일의 주소를 명시한다.
controls속성 : 비디오 동작을 명시할 수 있는 컨트롤 바를 명시한다.
loop속성 : 비디오의 반복여부를 명시한다.
autoplay속성 : 비디오의 자동재생 여부를 명시한다.
width속성 : 비디오의 너비를 명시한다.
height속성 : 비디오의 높이를 명시한다.
2. audio
<audio>태그를 이용해 표준화된 방식으로 브라우저에 오디오를 삽입할 수 있습니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>video & audio Tag</title>
<meta charset="UTF-8">
</head>
<body>
<audio controls loop>
<source src="#" type="audio/mp3">
<source src="#" type="audio/ogg">
</audio>
</body>
</html>
결과)
src속성 : 오디오 파일의 주소를 명시한다.
controls속성 : 오디오 동작을 명시할 수 있는 컨트롤 바를 명시한다.
loop속성 : 오디오의 반복여부를 명시한다.
autoplay속성 : 오디오의 자동재생 여부를 명시한다.
728x90
'[WEB] > [HTML & CSS]' 카테고리의 다른 글
| [HTML & CSS] CSS3를 HTML5에 적용하기 (0) | 2022.09.17 |
|---|---|
| [HTML & CSS] CSS 선택자(selecter) (0) | 2022.09.17 |
| [HTML & CSS] HTML5에 새롭게 추가된 input 속성 (0) | 2022.09.17 |
| [HTML & CSS] input의 속성들 (0) | 2022.09.16 |
| [HTML & CSS] HTML5에 새로 추가된 input (0) | 2022.09.16 |