-
HTML5 학습하기 ‘HTML5 시맨틱 태그 2 - 비디오’IT/HTML 2020. 4. 28. 07:30
HTML5 시맨틱 태그 2 - 비디오
1. HTML5 시맨틱 태그 - 비디오
1) 비디오 태그
(1) <video> 태그
<video> 태그는 HTML5에서 손쉽게 웹 문서에 비디오 파일을 삽입할 때 사용하는 태그이다.
<video src = “비디오 파일 경로” [속성] [속성=“속성 값”]>
① 여러 가지 속성들을 사용하여 사용자의 요구에 맞게 비디오 표현 가능하다
② PC, Mobile 모두 가능하다
③ 익스플로러8 이하 버전에서 인식 못 한다.
(2) <video> 속성
① Src : 비디오 파일의 경로지정
② Width : 비디오의 너비 지정
③ Height : 비디오의 높이 지정
④ Muted : 음소거
⑤ Controls : 비디오 재생 도구를 출력할지 지정
⑥ Autoplay : 비디오를 자동 재생할지 지정
⑦ Loop : 비디오를 반복할지 지정
⑧ Preload : 비디오를 재생하기 전에 모두 불러올지 지정
2) 비디오 태그를 활용한 HTML5 시맨틱 태그 실습 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> HTML5 예제 </title>
</head>
<body>
<header> <h1> 비디오 삽입 예제 </h1> </header>
<article>
<section>
<video src="video/name.mp4" width = "400" height = "320" controls autoplay loop >
</video>
</section>
</article>
</body>
</html>
'IT > HTML' 카테고리의 다른 글
HTML5 학습하기 ‘HTML5 시맨틱 태그 4 - 입력’ (0) 2020.04.30 HTML5 학습하기 ‘HTML5 시맨틱 태그 3 - 오디오’ (0) 2020.04.29 HTML5 학습하기 ‘HTML5 시맨틱 태그 1 - 이미지’ (0) 2020.04.27 HTML5 학습하기 ‘HTML5 기본 구조 및 문법의 기초’ (0) 2020.04.25 HTML5 학습하기 ‘HTML5 이란?’ (0) 2020.04.24