티스토리 뷰

[개발]프로그래밍/html5

[html5] video - 웹 페이지에서 비디오 재생

좋은 블로그 2021. 2. 23. 11:16
1. 개념
video - 웹 페이지에서 비디오 재생
html5 전에는 비디오나 오디오 재생시 형식에 맞는 플러그인이 설치되어야 함
하지만 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에서 다루도록 하겠습니다.
저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] canvas - 선 ,도형 그리기 및 채우기  (0) 2021.02.25
[html5] canvas - 웹 페이지에 그래픽 표현  (0) 2021.02.24
[html5] iframe - 다른 html을 호출하기 위한 프레임  (0) 2021.02.22
[html5] multiple,datalist - 데이터 목록 나열  (0) 2021.02.19
[html5] size,maxlength,minlength - 길이, 최대 글자 수, 최소 글자 수  (0) 2021.02.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday