<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" type="text/css" href="printpage.css" />
</head>
<body>
<h2>비디오</h2>
<video controls>
<source src="./video/sample-mp4-file (240p).mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</body>
</html>웹브라우저마다 호환성이 다르기 때문에 <video>태그 안에 문자를 넣을 수 있다.
비디오가 재생되지 않는 환경일 때 , 설정해놓은 Sorry, your browser doesn't support embedded videos.문구가 뜬다.
autoplay 속성
- Boolean이 속성.
이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작된다.
새로고침을 누르면 비디오가 재생이 되지 않고 멈추어 있다.
비디오 컨텐츠에 사운드가 있을 경우, 웹페이지에 진입하자마자 사운드가 나오게 되면 유저 입장에서 놀랠 수 있기 때문이다.
사운드를 없앤상태(mouted)상태에서는 autoplay를 사용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" type="text/css" href="printpage.css" />
</head>
<body>
<h2>비디오</h2>
<video autoplay muted>
<source src="./video/sample-mp4-file (240p).mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</body>
</html>poster 속성
- 썸네일과 비슷하다.
사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소입니다.
이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" type="text/css" href="printpage.css" />
</head>
<body>
<h2>비디오</h2>
<!-- <video src="/video/sample-mp4-file.mp4">
Sorry, your browser doesn't support embedded videos.
</video> -->
<video poster="./images/300.png">
<source src="./video/sample-mp4-file (240p).mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</body>
</html>
자라나라 나무나무