728x90
반응형
** 영상으로 보고 싶다면 아래 주소를 클릭하세요.
https://www.youtube.com/watch?v=lnIJqgJLDaM&t=275s
1. audio태그
- audio는 플러그인 도움없이 음악을 재생할 수 있는 태그
- 저작권 때문에 음악은 현 블로그에서는 제공하지 않음
1) audio태그의 속성
| 속성 | 설명 |
| src | 음악 파일의 경로를 작성하는 속성 |
| controls | 음악 재생도구를 출력 |
| autoplay | 음악을 자동재생할지 지정 - 현재 브라우저들이 자동재생은 막고 있다. |
| muted | 음악 소리 제거 |
| loop | 음악 무한 재생 |
| preload | 음악을 재생하기 전에 모두 불러올지 지정 |
2) 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오디오 태그</title>
</head>
<body>
<audio src="media/aaa.mp3" controls autoplay muted loop preload="metadata"></audio>
</body>
</html>
3) 코드 완성 뷰
- 음악 파일이 보이는 것이 확인
4) <source />태그 추가
- 브라우저 별로 인식되는 파일의 종류가 다르므로 음악은 한개 재생하지만
브라우저별로 인식하는 파일을 <source />태그에 연결
- 특히, mp3파일 확장자는 브라우저에서 재생횟수가 많으면 돈을 지불해야하는 저작권이 있다.
조심해서 사용해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오디오 태그</title>
</head>
<body>
<audio controls>
<source src="media/aaa.mp3" type="audio/mp3" />
<source src="media/aaa.ogg" type="audio/ogg" />
</audio>
</body>
</html>
5) <source />태그를 추가한 코드 완성 뷰
- source로 음악파일을 두개 넣었지만 컨트롤러는 하나만 생성되는 것을 확인할 수 있다.
2. video태그
- 별도의 플러그인 없이 동영상 파일을 재생할 수 있는 태그
- pixabay.com을 통한 동영상 파일 확인
1) video태그의 속성 정리
| 속성 | 설명 |
| src | 동영상 파일의 경로를 작성하는 속성 |
| width | 동영상의 가로폭을 설정하는 속성 |
| height | 동영상의 세로 높이를 지정하는 속성 |
| autoplay | 동영상을 자동재생하는 속성 - 최근 모든 브라우저가 자동 재생을 막는 추세 muted와 함께 사용하면 자동재생 처리가 된다. |
| muted | 동영상의 소리를 자동 재생 |
| loop | 동영상 재생 무한 재생 |
| controls | 동영상 재생 컨트롤러 표시 |
| preload | 동영상을 재생하기 전에 모두 불러올지 지정 |
| poster | 비디오가 준비중일때의 미리보기형태의 이미지 파일경로지정 |
2) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>동영상 태그</title>
<style type="text/css">
</style>
</head>
<body>
<video src="Macro.mp4" controls width="600" height="400" autoplay muted loop preload="metadata"></video>
</body>
</html>
3) 코드 완성 뷰
4) <source /> 태그 추가
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>동영상 태그</title>
<style type="text/css">
</style>
</head>
<body>
<video controls width="600" height="400">
<source src="Macro.mp4" type="video/mp4" />
<source src="Macro.webm" type="video/webm" />
</video>
</body>
</html>
5) <source /> 태그 추가 완성 뷰
728x90
반응형
'웹언어 > HTML5' 카테고리의 다른 글
| [HTML기초문법] 9강 form관련 태그input, select, textarea, label 등 (0) | 2020.05.19 |
|---|---|
| [HTML기초문법] 8강 iframe태그와 youtube영상 넣기 및 옵션 설정 (14) | 2020.05.18 |
| [HTML기초문법] 6강 테이블(table)태그 (0) | 2020.05.15 |
| [HTML기본문법] 5강 <div>태그와 <span>태그 (0) | 2020.04.23 |
| [HTML기초문법] 4강 이미지 태그 (0) | 2020.04.21 |
