[HTML] video 비디오 태그

예제 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

예제 1

예제 2

예제 3

예제 4

'HTML > Day36' 카테고리의 다른 글

티스토리툴바