오봉이와 함께하는 개발 블로그

미디어 태그 본문

FE/HTML

미디어 태그

오봉봉이 2021. 12. 2. 16:37
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
저작자표시

'FE > HTML' 카테고리의 다른 글

공간 분할 태그  (0) 2021.12.02
입력 양식 태그  (0) 2021.12.02
문서 삽입 태그  (0) 2021.12.02
이미지 태그  (0) 2021.12.02
테이블 태그  (0) 2021.12.02
'FE/HTML' Related Articles more
Comments