728x90
[형식]
[기능]
| 속성 | 내용 |
| autoplay | 자동 재생, Boolean |
| controls | 재생, 일시정지, 볼륨조절 같은 컨트롤 표시, Boolean |
| height | 화면 높이(수치만 입력하며 단위는 픽셀) |
| loop | 반복 재생, Boolean |
| muted | 재생하면서 기본 값으로 음소거, Boolean |
| poster | 비디오에 표시되는 이미지(URL) |
| preload | 비디오 로드방식(none, metadata, auto) |
| width | 화면 너비(수치만 입력하며 단위는 픽셀) |
[사용 예]
@ 모든 형식을 지원하는 소스 사용법
참고.
브라우저에서는 Adobe 사의 Flash를 이용하여 동영상을 브라우저에 표시할 수 있습니다.
플래시 비디오를 사용하려면, [<p>현재 브라우저는 비디오 요소를 지원하지 않습니다.</p>] 대신에
[<object>...</object>] 요소를 사용합니다. 자세한 사용법은 www.w3schools.com 사이트를 참고합니다.
@실습예제.
<!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>
<style>
div#wrap {
width: 800px;
text-align: center;
padding: 30px;
border: 1px solid #000;
margin: 40px auto;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Video요소를 사용한 동영상 실행</h1>
<video poster="images/poster.png"
controls muted autoplay loop>
<source src="videos/tweetsip.ogv" type="video/ogg">
<source src="videos/tweetsip.webm" type="video/webm">
<source src="videos/tweetsip.mp4" type="video/mp4">
</video>
</div>
<!-- div#wrap -->
</body>
</html>
728x90
'Study > HTML5&CSS' 카테고리의 다른 글
| HTML 1일차 (2) | 2022.10.11 |
|---|---|
| part08_images (0) | 2022.05.13 |
| part06_HTML유효성검사 (0) | 2022.05.13 |
| part05_Semantic요소 (0) | 2022.05.13 |
| part04_Div요소 (0) | 2022.05.13 |
