[개발]프로그래밍/html5
[html5] video - 웹 페이지에서 비디오 재생
좋은 블로그
2021. 2. 23. 11:16
1. 개념
video - 웹 페이지에서 비디오 재생
html5 전에는 비디오나 오디오 재생시 형식에 맞는 플러그인이 설치되어야 함
하지만 html5에서는 플러그인 없이 비디오를 재생할 수 있도록 video 태그가 생김
하지만 html5에서는 플러그인 없이 비디오를 재생할 수 있도록 video 태그가 생김
|
속성 |
설명 |
|
width |
비디오가 재생될 브라우저의 폭 지정 |
|
height |
비디오가 재생될 브라우저의 높이 지정 |
|
controls |
재생,재생시간,중단,음소거 등 여러 제어 버튼이 화면에 출력 |
|
autoplay |
비디오 로딩시 즉시 재생(브라우저별에 따라 설정 방법이 다름) |
|
loop |
반복 재생 |
|
poster |
로드되지 않을 때 표시될 이미지 URL |
|
preload |
설정에 따라 비디오를 미리 다운로드 할지 여부를 설정 |
|
none |
미리 다운로드 하지 않음 |
|
metadata |
기본 정보만 가져옴 |
|
auto |
미리 다운로드를 함(기본 값) |
|
muted |
오디오를 음소거로 설정 |
2. 태그
video
html5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
</head>
<body>
1
<video src
=
"code.mp4"
width
=
"300"
height
=
"200"
controls></video>
2
<video
width
=
"300"
height
=
"200"
controls>
<source
src
=
"code.mp4"
type
=
"video/mp4"
>
</video>
3
<video id
=
"video"
></video>
<script>
var
video = document.
getElementById
(
'video'
);
video.
setAttribute
(
'src'
,
'code.mp4'
);
video.controls
=
true
;
video.width
=
"300"
;
video.height
=
"200"
;
</script>
</body>
</html>
|
결과 화면
코드 설명
공통 내용
1,2,3 모두 같은 비디오 화면을 가져오고 있습니다.
크롬 기준으로 테스트를 진행해 보았습니다
javascript를 이용해서 재생하는 것을 해봤는데 재생이 되지 않아 정책에 따라서 브라우저별로 하는 방법이 다름을 보게 되었습니다. 이 부분은 차후 다른 포스팅을 통해서 비디오 event,method를 가지고 javascript에서 다루도록 하겠습니다.
크롬 기준으로 테스트를 진행해 보았습니다
javascript를 이용해서 재생하는 것을 해봤는데 재생이 되지 않아 정책에 따라서 브라우저별로 하는 방법이 다름을 보게 되었습니다. 이 부분은 차후 다른 포스팅을 통해서 비디오 event,method를 가지고 javascript에서 다루도록 하겠습니다.