인터넷 프로그래밍 #3-2 멀티미디어 태그

인터넷 프로그래밍
3-2 멀티미디어 태그

 

단원 목표

1. 오디오 태그 사용법에 대해 설명하기
2. 비디오 태그 사용법에 대해 설명하기
3. HTML에서의 Color 사용법에 대해 설명하기

 

오디오태그 기본형
<audio src="URL" 속성 또는 속성="값"></audio>

오디오파일형식
1. mp3 - MPEG-1, 오디오 Layer-3, 압축파일
2. wav - MS와 IBM 이 개발한 비압축 파일
3. ogg - mp3 대안으로 개발한 스트리밍 방식 파일

오디오 태그 속성과 속성값 
autoplay - 오디오 파일 자동 실행
controls - 오디오 재생도구 표시
loop - 오디오 재생이 끝나면 다시 재생(반복 재생)
src - 오디오 파일의 위치(URL)
muted - 오디오 소리 제거
preload - 오디오 재생 전 오디오 로드 여부 설정

ex)
<h4>음악 자동 재생</h4>
<audio controls autoplay>
 <source src="Unvailable.mp3 type="audio/mpeg">
</audio>


비디오 태그 기본형
<video src="URL" 속성="값></video>

비디오 파일형식
1. mp4 - MPEG-4압축파일, H.264 비디오 코덱, AAC 오디오 코덱
2. webm - 구글이 개발한 고화질 영상 압축 파일, VP8 비디오 코덱, Vorbis 오디오 코덱
3. ogg - 공개 소스 기반의 멀티미디어 포맷, Theora 비디오 코덱, Vorbis 오디오 코덱

비디오 태그 속성 및 속성값
poster - 일종의 썸네일
-오디오와 동일
autoplay - 파일 자동 실행
controls - 재생도구 표시
loop - 반복 재생
src - 파일의 위치(URL)
muted - 소리 제거
preload - 재생 전 로드 여부 설정
width, height - 크기

ex)
<h4>비디오 자동 재생</h4>
<video width="400"controls autoplay>
 <source src="Skyscrapers.mp4 type="video/mp4">
</video>

유투브 동영상 따오기
1. 원하는 영상 아래 공유 버튼 클릭
2. 퍼가기 클릭
3. url 복사
4. <iframe> 태그 전체 복사 (시작 시간 체크하여 시작위치 지정)
5. HTML 파일에 붙여 넣기

ex)
<iframe width="560" height="315"
src="https://www.youtube.com/embed/K1QICrgxTjA"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; ancrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


HTML Color
HTML에서의 색
-미리 정의된 색상 이름이나 RGB, HEX, HSL, RGBA, 또는 HSLA 값으로 지정

 

색 이름 
tomato, orange, dodgerblue, grey, slateblue, violet

RGB 와 RGBA
-각 색별로 0~255까지 사용
-256 * 256 * 256 = 16,777,216 색상 표현 가능
-세 가지 색의 값을 같게 하면 다양한 회색 표현 가능
-RGBA는 Alpha (투명도) 만 추가, 0~1.0까지 사용

HEX
-16진수를 이용하여 두 자릿수로 표현
-#(rrggbb)
-각 색별로 16진수 00~FF, 십진수로 0~255로 표현


*음악 자동 재생이 안될 경우, 크롬 보안 문제
크롬 설정에서 개인정보 및 보안 - 사이트 설정 - 추가 컨텐츠 설정 맨 아래 소리 - 소리재생이 허용됨에 주소 추가 하면 가능


추천사이트
-pixabay.com
-studio.youtube.com - Youtube audio library
-mazwai.com
-cidevo.net
-soundeffect.lab.info

 

 

 

*** *** ***  *** ***  *** ***  *** ***  *** ***  *** *** 핵심정리 *** ***  *** ***  *** ***  *** ***  *** ***  *** *

오디오(audio) - mp3, wav, off
비디오(video) - mp4, webm, ogg
RGB color - R(red), G(green), B(blue)
RGBA - RGB 에 투명도를 더한 것
HEX color - 각 색별로 16진수 00~FF, 십진수로 0~255로 표현