반응형
비디오(video)
- HTML5 이전에는 웹 페이지에서 비디오를 삽입하기 위해서는 플래시(flash) 같은 외부 플러그인에 의존해야 했지만 HTML5에서는 <video>태그를 이용한 표준화된 방식을 제공한다.
- HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐이다.
<video src="파일경로" controls></video>
HTML5 video 요소
- <video>: 비디오와 영화 등 비디오 파일을 명시한다. <video> 태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <video> 태그를 지원하지 않을 때만 화면에 표시된다.
- <source>: 파일 형식에 따라 재생되지 않는 브라우저가 존재하지만 <source> 태그를 사용하여 파일 형식의 차이 문제를 해결 할 수 있다. video 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시하며, <source> 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용한다.
- <track>: <track> 태그는 비디오가 재생될 때 보일 자막이나 캡션 파일을 명시할 때 사용한다.
<video style="width:576; height:360" controls>
<!-- video style="width:576; height:360" controls autoplay -->
<!-- video style="width:576; height:360" controls loop -->
<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>
HTML5 video 속성
- height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시하고, controls 속성으로 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다.
- autoplay 속성은 웹 페이지가 로드될 때 비디오를 자동으로 재생시켜 줄지 않을지를 설정하며, muted 속성은 초기에 음소거 상태로 시작하며, loop 속성으로 설정하면 비디오의 재생이 끝나도 계속적으로 반복해서 비디오를 재생한다.
- poster 속성은 비디오가 아직 준비 중일때 불러올 이미지 썸네일 파일의 경로를 명시하고, preload 속성은 비디오를 재생하기 전에 파일의 내용을 미리 다운받을지를 명시한다.
- kind 속성은 자막 문자열의 타입을 명시하며, srclang 속성은 해당 문자열의 언어 설정을 명시하고, label 속성은 사용자가 보게 될 라벨을 명시한다.
Reference
반응형
'Language > Html' 카테고리의 다른 글
[Html] 공간 분할 방법 - 블록/인라인 (0) | 2023.06.19 |
---|---|
[Html] 그래픽 요소 - Canvas와 SVG (0) | 2023.06.19 |
[Html] 멀티미디어 오디오 - 반복, 음소거 (0) | 2023.06.19 |
[Html] 멀티미디어 이미지 - 테두리, 부분 선택 (0) | 2023.06.19 |
[Html] 멀티미디어와 플러그인 - object, embed (0) | 2023.06.19 |