웹페이지에 비디오를 넣기 위해서는 video태그를 이용해야 합니다.
아래는 웹 페이지에 비디오를 추가하는 코드입니다.
<video height="30%" width="30%" src="Shooting_star.mp4" controls></video>위 코드를 적용한 웹페이지 모습입니다.
video 태그에 사용 가능한 속성
| 속성 | 설명 | 사용예 |
| height | 세로 크기 지정 | height="100" |
| width | 가로 크기 지정 | width ="100" |
| controls | 컨트롤러를 생성함 | controls |
| src | 소스를 삽입하는 속성 | src= "Shoothing_star.mp4" |
| type | 파일의 타입 지정 | type="video/mp4" |
| autoplay | 비디오 자동 재생 | autoplay |
| lope | 비디오 반복 재생 | lope |
* 크롬에서 자동재생이 정상적으로 작동되려면 autoplay 속성 뒤에 음소거 속성인 muted 추가해야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>video</title>
</head>
<body>
<video height="30%" width="30%" src="Shooting_star.mp4" type="video/mp4" controls></video>
</body>
</html>
'웹만들기' 카테고리의 다른 글
| 누구나 할 수 있는 웹 만들기(웹 개발의 시작!!) (0) | 2022.04.18 |
|---|
