비디오
웹 브라우저는 여러 개의 <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
