video 태그 사용법
<!--1번 방법-->
<video src="비디오 경로"></video>
<!--2번 방법-->
<video>
<source src="비디오 경로"></source>
</video>
HTML5에서 웹 문서에 영상을 첨부하고 싶다면 <video> 태그를 사용합니다. 위의 예제처럼 video 태그와 src에 비디오 파일의 경로만 작성해주면 웹 문서에 영상이 첨부됩니다. 하지만 보통 video태그는 controls(컨트롤 막대) 속성과 함께 사용한다는 것은 알아두셨으면 좋겠습니다. controls 속성을 사용하지 않으면 비디오를 재생시키거나 일시 정지할 수 없기 때문에 매우 불편합니다.
video 태그에서 사용할 수 있는 속성
| 속성 | 설명 |
| controls | 영상 컨트롤 막대를 표시합니다. 컨트롤 막대에는 재생/멈춤, 진행바, 볼륨 등이 있습니다. |
| width, height | 화면에 표시되는 영상의 크기를 조절합니다. |
| autoplay | 영상을 자동 재생합니다. |
| loop | 영상을 반복해서 재생합니다. |
| muted | 영상은 재생하지만 소리는 음소거합니다. |
| preload | 영상을 재생하기 전에 미디어 파일을 다운로드 할 것인지 정합니다. |
| poster | 브라우저나 인터넷 문제등으로 영상을 재생할 수 없을 경우 표시합니다. |
controls (재생 바 생성)
<video src="경로" controls>
</video>
controls 속성을 사용하면 미디어 파일에 컨트롤 막대가 함께 표시됩니다. 속성은 값은 따로 없으며 controls라는 속성만 입력하면 됩니다.
width, heigth (비디오 크기 설정)
<video src = "경로" controls width="300" height="200">
</video>
width와 height 속성을 사용하면 화면에 표시되는 비디오의 크기를 조절할 수 있습니다. width나 height 값 하나만 지정하면 나머지는 자동으로 계산하여 표시해줍니다.
preload (파일 다운로드 여부)
<video src="경로" width="300" controls preload="none">
</video>
- none : 미디어 파일을 미리 다운로드하지 않고 사용자가 재생 버튼을 눌러야만 다운로드를 합니다.
- metadata : 미디어 파일 전체를 다운로드하지 않고 메타 정보만 다운로드합니다.
- auto : 사용자가 즉시 이용할 수 있도록 웹 문서를 로드할 때 미디어 파일도 다운로드합니다. preload라고만 설정하면 auto 값을 기본으로 합니다.
preload 속성은 파일을 재생하기 전에 미디어 파일을 모두 다운로드할 것인지 결정합니다. 사용할 수 있는 속성은 none, metadata, auto 3가지가 있습니다.
muted (음소거로 재생)
<video src="경로" width="300" controls muted>
</video>
비디오를 재생할 때 소리만 끄고 영상만 재생하고 싶다면 muted 속성을 추가합니다. 특별히 소리가 필요하지 않은 영상이라면 사용할만한 속성입니다.
autoplay (자동 재생)
<video src="경로" width="300" controls autoplay>
</video>
autoplay를 사용하면 비디오 파일을 다운로드하자마자 즉시 실행합니다. 참고로 크롬과 모바일에서는 무분별한 광고 등의 재생을 막기 위한 목적으로 자동 재생되지 않습니다. 가급적이면 사용하지 않기를 권장드리는 속성입니다.
loop (반복 재생)
<video src="경로" width="300" controls loop>
</video>
영상 재생이 끝날을 때 반복 재생하는 속성입니다.
poster (영상 오류 시 대체 이미지)
<video src = "경로" controls width="300" poster="error.png">
</video>
브라우저나 인터넷 문제 등으로 인해 비디오를 재생할 수 없을 때 대체할 수 있는 포스터 이미지를 지정하는 속성입니다.
source 태그 사용법 (여러 개의 비디오 파일 형식 지정하기)
<video>
<source src="비디오 경로" type="video/mp4" ></source>
<source src="비디오 경로" type="video/ogg" ></source>
대체 내용
</video>
- src : 미디어 파일의 경로를 지정합니다.
- type : 웹 브라우저가 해당 미디어 파일을 재생할 수 있는지 확인하도록 미디어 파일의 유형을 알려줍니다.
- codecs : 비디오 코덱을 지정합니다.
브라우저에 따라 지원하는 코덱이 다르기 때문에 한 가지 형식만 사용했을 경우 일부 오래된 브라우저에서는 작동을 안 할 수 있습니다. 사용자의 브라우저 환경을 모두 고려한다면 최신 브라우저와 이전 브라우저도 모두 비디오를 재생할 수 있도록 ogv 파일도 함께 지정해주어야 합니다. 최근에는 무료 코덱을 사용하면서 화질도 뛰어난 webm 파일까지 함께 사용합니다. 이렇게 여러 형식의 비디오 파일을 함께 사용하려면 <vidio> 태그와 <source> 태그를 함께 사용해 여러 개의 파일을 지정해야 합니다. <source> 태그에서는 미디어 파일의 경로를 지정하는 src 속성과 미디어 파일의 형식을 알려주는 type속성을 명시합니다.
'HTML, CSS' 카테고리의 다른 글
| [Html] 글자 배경색 mark 태그(형광펜 효과) (0) | 2024.04.18 |
|---|---|
| [Html] track 태그 (0) | 2024.04.18 |
| [Html] audio 태그 사용법 & 예제 총정리 (0) | 2024.04.18 |
| [Html] img 이미지 태그 사용법 총정리 (0) | 2024.04.18 |
| [Html] 시맨틱 태그(Semeantic Tag) (0) | 2024.04.18 |