1. 오디오와 비디오
<audio src="파일 경로">내용(웹 브라우저가 지원하지 않을 때 표시)</audio>
<video src="파일 경로">내용(웹 브라우저가 지원하지 않을 때 표시)</video>
- 동영상과 비디오를 올리기 위해서는 파일 경로를 알아야 한다.
- 내용은 웹 브라우저가 해당 멀티미디어를 지원하지 않을 때 표시된다.
2. 오디오와 비디오 속성
<audio src="파일 경로" controls>재생 막대 표시</audio>
<audio src="파일 경로" autoplay>자동 재생</audio>
<audio src="파일 경로" loop>반복 재생</audio>
<audio src="파일 경로" muted>소리 음소거</audio>
<audio src="파일 경로" preload="auto">동영상과 메타데이터 모드 로드한다.</audio>
<audio src="파일 경로" preload="metadata">메타데이터만 로드한다.</audio>
<audio src="파일 경로" preload="none">로드하지 않는다.</audio>
<video src="파일 경로" width="400" height="400">비디오 플레이어의 너비와 높이를 지정</video>
<video src="파일 경로" poster="이미지 경로">썸네일 표시</video>
- Controls : 재생 막대를 표시한다.
- Autoplay : 자동으로 재생한다.
- Loop : 반복 재생한다.
- Muted : 소리를 음소거한다.
- preload : 페이지를 열 때 어떻게 로드할지 정한다.
1. preload = "auto" : 동영상, 메타데이터 모두 로드한다. (기본 설정)
2. preload = "metadata" : 메타데이터만 로드한다.
3. preload = "none" 로드하지 않는다.
- width, height : 동영상의 너비와 높이를 지정한다.
- poster : 동영상에 썸네일을 넣을 때 사용하며, 넣지 않을 경우 검은 화면으로 표시된다.
'FrontEnd > HTMl' 카테고리의 다른 글
[HTML] form, input (0) | 2021.07.18 |
---|---|
[HTML] div, span (0) | 2021.07.18 |
[HTML] 리스트와 테이블 (0) | 2021.07.17 |
[HTML] 링크와 이미지 (0) | 2021.07.17 |
[HTML] Style 속성 (0) | 2021.07.17 |