Do it : HTML - 11.멀티미디어

웹에서 멀티미디어 사용하기

-과거 : 플러그인 프로그램= 특정 프로그램 설치

 

 

오디오 & 비디오 재생하기

 

<audio>태그 : 오디오 파일 삽입

   <audio src="media/bgsound.mp3" autoplay controls loop muted preload>

   </audio>

~src : 오디오 파일 경로

~autoplay : 자동 재생

~controls : 컨트롤 막대, 재생/멈춤, 진행 바, 볼륨

~loop : 반복 재생

~muted : 소리 끄기

~preload : 재생 전에 다운로드해서 준비

 

 

<video>태그 : 비디오 파일 삽입

   <video src="media/Painting" controls >

   </video>

~컨트롤 막대 없으면 오른쪽 버튼 > 컨트롤 표시

 

 

<source>태그 : 여러 미디어 파일 한꺼번에 지정

~브라우저 마다 지원하는 오디오, 비디오 코덱이 다르기 때문에 여러개 파일을 지정

   <video controls>

      <source src="Painting.mp4" type="video/mp4" codecs="">

      <source src="Painting.webm" type="video/webm" codecs="">

      <source src="Painting.ogv" type="video/ogg" codecs="theora,vobis">

   </video>

~src : 파일 경로

~type : 미디어 파일의 유형

~codecs : 비디오 코덱

 

 

이전 브라우저용 대체 텍스트

~<video>태그 지원 안하는 브라우저 위해

~이 영상을 보기 위해서는 HTML5를 지원하는 브라우저가 필요합니다 넣기

<video controls>

      <source src="Painting.mp4" type="video/mp4" codecs="">

      <source src="Painting.webm" type="video/webm" codecs="">

      <source src="Painting.ogv" type="video/ogg" codecs="theora,vobis">

      이 영상을 보기 위해서는 HTML5를 지원하는 브라우저가 필요합니다

   </video>

 

 

<audio>태그와 <video>태그의 속성

~두 태그의 속성은 일치한다

~src : 오디오 파일 경로

~autoplay : 자동 재생

~controls : 컨트롤 막대, 재생/멈춤, 진행 바, 볼륨

~loop : 반복 재생

~muted : 소리 끄기

~preload : 재생 전에 다운로드해서 준비

~~none | metadata | auto (기본값)

~width height : 너비, 높이, 하나만 지정해도 나머지는 자동 계산

~poster : 재생 못할 때 대체 이미지 <video poster="firework.jpg">

 

 

<track>태그 : 자막 추가

~외부 자막 파일을 연결한다

   <track kind="subtitles" src="Wildlife.vtt" srclang="ko" label="korean" default> 

 

~kind : 자막의 종류를 지정한다

~~subtitle : 자막

~~captions : 캡션, 청각장애인용

~~descriptions : 설명, 화면표시x

~~chapters : 장 제목, 화면표시x

~~metadata : 정보, 화면표시x 

 

~src : 파일 경로

~srclang : 언어지정, subtitle 속성 있으면 반드시 지정

~label : 자막 식별

~default : 기본으로 사용할 자막

 

 

WebVTT 자막 파일

~smi : 자막 파일, 내용만 있음

~srt :  자막 파일, 내용, 시간 정보

~vtt :  자막 파일, 공식적, 내용, 시간 = 메모장에 입력후 .vtt파일로 저장해 사용

~~HH:MM:SS.tt 형식으로 표시

~~빈 줄을 넣어 자막 끝났음을 표시

 

 

비디오 파일에 자막 파일 연결

   <video controls>

      <source src="Painting.mp4" type="video/mp4">

      <source src="Painting.webm" type="video/webm">

      <track src="Painting.vtt" srclang="ko" label="Korean" default>

   </video>

~WebVTT 자막을 사용한 비디오는 웹상에 올려 놓고 재생해야 자막이 보인다!!

https://testdrive-archive.azurewebsites.net/Graphics/CaptionMaker/Default.html

HTML5 Video Caption Maker

 

동영상으로 홈페이지 대문 만들기

~한 화면이 꽉 찬다 > 내용이 화면 단위로 작성되는 경우 이용

~스마트폰에서 영상x > 포스터 이미지 넣기

~재생 시간(2~30초), 파일용량 (5M 미만) 영상 사용

~자동 재생

~오디오X  >muted 속성

 

1. 동영상 지정하기

-video 태그 수정 : 자동, 반복, 소리 끔 재생

2. CSS 동영상 배경 만들기

-video 태그 안에 id=bg 추가한다

-#bg 스타일 정의한다

-배경 동영상 위치고정

-왼쪽, 오른쪽 여백 없이 채움

-너비, 높이 화면 꽉 차레 채움

-다른 요소 아래 놓이게 함

-포스터 이미지 추가

 

3. 텍스트 위치 옮기기

-화면 오른쪽으로 옮긴다