![[HTML] video 비디오 태그](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdcvv1C%2FbtroRFFWpW0%2FyCdE9XWzYj6xG0oJRpY7K0%2Fimg.png)
예제 1
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<video controls="controls">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.webm" type="video/webm" />
</video>
</body>
</html>
예제 2
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<video poster="http://placehold.it/640x360" width="640" height="360" controls="controls">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.webm" type="video/webm" />
</video>
</body>
</html>
예제 3
<!DOCTYPE html>
<html>
<head>
<title>Video.js Basic</title>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
</body>
</html>
※ 참고 video.js 플러그인
웹 브라우저마다 표시되는 video 태그의 형태가 일관되지 않으므로 웹 페이지를 디자인 할 때 video.js 플러그인을 사용한다.
예제 4
<!DOCTYPE html>
<html>
<head>
<title>Video.js Basic</title>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video controls="controls" width="640" height="360"
class="video-js vjs-default-skin" data-setup="{}">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.webm" type="video/webm" />
</video>
</body>
</html>
video 비디오 태그
<src> 비디오 파일 경로
<poster> 비디오 준비 중일 때의 이미지 파일 경로 지정
<preload> 비디오 재생 전 모두 불러올지 지정
<autoplay> 비디오 자동 재생 지정
<loop> 비디오 반복재생 지정
<controls> 비디오 재생 도구 출력 지정
<width> 비디오 너비 지정
<height> 비디오 높이 지정
(video 태그도 audio 태그처럼 웹 브라우저마다 지원하는 형식이 다르므로 source 태그를 사용한다.)
'HTML > Day36' 카테고리의 다른 글
| [HTML] textarea 태그 & select 태그 (2) | 2021.12.25 |
|---|---|
| [HTML] form 입력 양식 태그 & input 태그 (0) | 2021.12.25 |
| [HTML] audio 오디오 태그 (0) | 2021.12.25 |
| [HTML] img 이미지 태그 (0) | 2021.12.25 |
| [HTML] table 테이블 태그 (0) | 2021.12.25 |