HTML 웹문서에서 비디오 재생을 위해서는 비디오 태그를 사용합니다.
비디오 태그 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>비디오 태그 예제 입니다.</h3>
<video src="video/1.mp4" controls width="20%" autoplay loop></video>
</body>
</html>비디오 태그에서 중요한 속성은 하기와 같습니다.
src : 비디오 파일의 경로를 지정합니다. (비디오 파일들만 별도로 관리하는 것이 효율적입니다)
controls : 컨트롤 바를 보여줍니다. 즉, 컨트롤바로 비디오를 제어할 수 있습니다.
width : 비디오 화면의 크기를 설정합니다. 가로 크기만 설정해도 세로는 가로비율에 맞게 조정됩니다.
px 고정 크기와 퍼센트로 브라우저 크기 대비 설정이 가능합니다.
autoplay : 자동 재생 기능입니다.
loop : 반복 재생 기능입니다.
웹 문서의 비디오 재생 태그 <video> 였습니다.
감사합니다.
오디오 태그 예제
사운드 재생을 위한 오디오 태그 예제입니다. 브라우저에서 사운드 플레이를 위해서는 라는 태그를 사용해야 합니다. 예제를 보겠습니다. 오디오 태그 예제 입니다 태그 중 핵심적인 역할의 속
soo0100.tistory.com
이미지를 표현해주는 태그 예제
이미지를 브라우저에서 불러오기 위해서는 태그를 사용해야 합니다. 태그 예제를 살펴봅니다. 이미지 태그 예제 입니다 이미지 태그에서 중요한 부분은 2곳 입니다. src : 이미지 경로를 기재 합
soo0100.tistory.com
<Object> 태그 예제
Object 태그는 이미지, 비디오, PDF 파일 등의 멀티미디어 파일들을 브라우저에 표시할 수 있습니다. HTML5에서는 이미지는 태그, 비디오는 태그를 사용하지만, H5 이전에는 Object 태그가 이러한 미디
soo0100.tistory.com
'앱 만들기 > HTML5 study' 카테고리의 다른 글
| <Object> 태그 예제 (4) | 2023.03.10 |
|---|---|
| html 하이퍼링크 예제 (2) | 2023.03.09 |
| 오디오 태그 예제 (6) | 2023.03.06 |
| html 표 셀 합치기 예제 (4) | 2023.03.04 |
| 이미지를 표현해주는 태그 예제 (2) | 2023.03.03 |
댓글