오봉이와 함께하는 개발 블로그
미디어 태그 본문
728x90
FrontEnd_day1 정리 (2021.12.02 목요일)
미디어 태그
오디오 태그
- <audio>
- 오디오 파일 재생
- 속성
- src : 경로
- preload : 재생 전 모두 다운로드
- autoplay : 자동 재생
- loop : 반복 재생
- controls : 재생 도구 출력
- <audio src=”audio.mp3” preload=”auto” controls loop>
- <source>
- 미디어 파일 지정
- 여러 미디어 파일을 한꺼번에 지정
- 브라우저에 따라 지원하는 오디오나 비디오 코덱이 다르기 때문에 한 가지 파일만 사용했을 경우 일부 브라우저에서 지원하지 않는 경우 발생
- 여러 유형의 미디어 파일 지정해야 함
- <audio> <source src="a.ogg" type="audio/ogg"> </audio>
- <audio> <source src=”a.mp3” type=”audio/mpec”> </audio>
오디오 태그 예제
- audio.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>
<div>
<audio src="media/audio.mp3" preload="auto" controls loop></audio>
</div>
</body>
</html>
비디오 태그
- <video>
- mp4, ogv, webm 파일 형식
- 속성
- src : 경로
- preload : 재생 전 모두 다운로드
- autoplay : 자동 재생
- loop : 반복 재생
- controls : 재생 도구 출력
- poster : 비디오 준비 중일 때의 이미지 파일 경로 지정
자막 태그
- <track>
- 자막 표시
- WebVTT 형식 파일(.vvt)
- Web Video Text Tracks
비디오&자막 태그 예제
- video.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>
<div>
<video src="media/Wildlife.mp4" poster="media/poster.jpg" width="640" height="360" controls>
<track src="media/track.vtt" kind="captions" srclang="ko" label="korean"></track>
</video>
</div>
</body>
</html>
728x90
Comments