[HTML, CSS] - HTML 멀티미디어

구구르밍 2023. 10. 19. 00:10

비디오

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

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

비디오 파일 형식

- MP4 : Moving Picture Experts Group에 의해 개발되었으며, 비디오 코덱으로는 H.268, 오디오 코덱으로는 ACC를 사용합니다. 적은 용량으로도 고품질의 영상 및 음성을 구현할 수 있어 인터넷을 통한 스트리밍에 많이 활용되는 파일 형식

- WebM : 구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식이며, 비디오 코덱으로는 VP8, 오디오 코덱으로는 Vorbis를 사용

- OGV : Theora Ogg라고도 불리며, Xiph 재단에 의해 MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다. 비디오 코덱으로는 Theora, 오디오 코덱으로는 Vorbis를 사용

비디오 요소

video	비디오와 영화 등 비디오 파일을 명시함.
source	video 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시함. 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용함.
track	비디오 플레이어에 대한 텍스트 자막을 명시함.

track

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

<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">
    <track kind="subtitles" src="sample_subtitle_en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="sample_subtitle_fr.vtt" srclang="fr" label="Francais">
    이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>

비디오 속성

src	비디오 파일의 경로를 명시함.
height	비디오 파일의 높이를 명시함.
width	비디오 파일의 너비를 명시함.
controls	비디오의 기본적인 동작을 조절할 수 있는 패널를 명시함.
autoplay	비디오의 자동 재생 여부를 명시함.
loop	비디오의 반복 재생 여부를 명시함.
poster	비디오가 아직 준비 중일때 불러올 이미지 파일의 경로를 명시함.
preload	비디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시함.
kind	자막 문자열의 타입 명시
srclang	해당 문자열의 언어 설정 명시
label	사용자가 보게 될 라벨 명시

height / width 속성

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

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

control

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

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

autoplay

웹 페이지가 로드(load) 될 때 비디오를 자동으로 재생 설정

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

loop

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

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

오디오

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

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

오디오 파일 형식

- MP3 : Moving Picture Experts Group에 의해 개발되었으며, MPEG-1의 오디오 규격으로 개발된 손실 압축형 파일 형식입
- WAV : IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식
- Ogg : Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식

오디오 요소

audio	오디오와 음악 등 오디오 파일을 명시함.
source	audio 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시함. 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용함.

오디오 속성

src	오디오 파일의 경로를 명시함.
controls	오디오의 기본적인 동작을 조절할 수 있는 패널를 명시함.
autoplay	오디오의 자동 재생 여부를 명시함.
loop	오디오의 반복 재생 여부를 명시함.
preload	오디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시함.

control

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

<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) 될 때 음악을 자동으로 재생시켜 줄지 않을지를 설정

<audio controls autoplay>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

loop

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

<audio controls loop>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

플러그인

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

Java Applet, Flash Player, Pdf Reader 등

object 요소

HTML 문서에 삽입할 객체(object)를 명시

모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 또 다른 HTML 문서, 이미지 삽입

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

embed

HTML 문서에 삽입할 객체(object)를 명시

모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 또 다른 HTML 문서, 이미지 삽입

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

https://www.tcpschool.com/html/html5_multimedia_filetype