[Project H4C] 9. HTML5 멀티미디어

[Project H4C] 9. HTML5 멀티미디어

HTML5와 멀티미디어 파일 형식

http://tcpschool.com/html/html5_multimedia_filetype

코딩교육 티씨피스쿨

• HTML5 표준이 공식적으로 지원하는 비디오 파일 형식

MP4, WebM, OGV

 

• HTML5 표준이 공식적으로 지원하는 오디오 파일 형식

MP3, WAV, Ogg

 

• video

HTML5 에서는 <video>태그를 이용하여 웹 페이지에 비디오를 삽입할 수 있다.

 

 

 

 

 

 

• video 요소의 속성

control: 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 제공

height, width: 웹 브라우저에 삽입되는 비디오의 크기를 명시

source: 여러개의 <source>태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용

<video>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <video>태그를 지원하지 않을 때만 화면에 보인다

e.g.)

<video style="width:576; height:360" controls>

    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">

    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">

    이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타난다!

</video> 

 

autoplay: 웹 페이지가 load 될 때 비디오를 자동으로 재생시켜 줄지 않을지를 설정

loop: 비디오의 재생이 끝나도 계속적으로 반복해서 비디오를 재생

track: 비디오가 재생될 때 보일 자막이나 캡션 파일을 명시

kind: 자막 문자열의 타입을 명시

srclang: 해당 문자열의 언어 설정

label: 사용자가 보게 될 라벨을 명시



• HTML5 video 요소

video: 비디오와 영화 등 비디오 파일을 명시

source: video 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시

             웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용

track: 비디오 플레이어에 대한 텍스트 자막을 명시

 

• HTML5 video 속성

src: 비디오 파일의 경로를 명시

height: 비디오 파일의 높이를 명시

width: 비디오 파일의 너비를 명시

controls: 비디오의 기본적인 동작을 조절할 수 있는 패널을 명시

autoplay: 비디오의 자동 재생 여부를 명시

loop: 비디오의 반복 재생 여부를 명시

poster: 비디오가 아직 준비 중일때 불러올 이미지 파일을 경로로 명시

preload: 비디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시



 

 

 

 

 

 

• 오디오 요소의 속성

control: 재생, 정지 및 소리의 조절 등 오디오의 기본적인 동작을 조절할 수 있는 패널을 생성

웹 브라우저는 여러개의 <source>태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용

<audio>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <audio>태그를 지원하지 않을 때만 화면에 표시됨

e.g.)

<audio controls>

    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">

    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">

    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타난당!

</audio>

 

autoplay: 웹 페이지가 load 될 때 음악을 자동으로 재생시켜 줄지 않을지를 설정

loop: 오디오의 재생이 끝나도 계속적으로 반복해서 오디오를 재생

 

 

• HTML5 audio 요소

audio: 오디오와 음악 등 오디오 파일을 명시

source: audio 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시

            웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용

 

 

• HTML5 audio 속성

src: 오디오 파일의 경로를 명시

controls: 오디오의 기본적인 동작을 조절할 수 있는 패널을 명시

autoplay: 오디오의 자동 재생 여부를 명시

loop: 오디오의 반복 재생 여부를 명시

preload: 오디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시

 

 

 

 

 

 

 

• Plug-in

웹 브라우저의 표준 기능을 확장해주는 프로그램을 의미

e.g. Java Applet, Flash Player, Pdf Reader...

이런 플러그인 object요소 또는 embed 요소를 사용하여 HTML 문서에 추가할 수 있다

 

- object 요소

HTML 문서에 삽입할 object(객체)를 명시하는데 사용된다.

이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 또 다른 HTML 문서를 삽입할 수도 있다.

또한 이미지를 삽입할 때도 사용할 수 있다. 

e.g.)

<object data="/examples/media/sample_pugins_pdf.pdf" style="width:100%; height:700px"></object>

 

- embed 요소

HTML 문서에 삽입할 object(객체)를 명시하는데 사용된다.

이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 HTML 문서를 삽입할 수도 있다.

이미지를 삽입할 때에도 사용할 수 있다

e.g.)

<embed src="/examples/media/sample_plugin_pdf.pdf" style="width:100%; height:700px">

 

embed 요소는 HTML5에서 부터 유효하다.