티스토리 뷰
HTML 비디오 출력도 이미지와 오디오 출력과 비슷합니다.
우선 넣고 싶은 (혹은 웹에 띄우고 싶은) 비디오 파일을 준비합니다.
준비한 파일을 folder로 복사합니다.
다만 folder는 html 코드를 입력할 파일이 있는 곳이어야 합니다.
폴더로 복사한 뒤 이제 코드를 입력 해 보겠습니다.
비디오를 출력하고 싶으면 바디 안에 <video src=" ">라는 비디오 태그를 입력 하면 됩니다.
video src=" "의 쌍따옴표 안에 방금 끌고 온 비디오 파일명을 .mp4까지 적습니다.
그 후 type을 설정하고 controls를 추가하면 영상에도 컨트롤러가 생성되게 됩니다.
|
1
2
3
4
|
<body>
<video src="411.mp4" type="video/mp4" controls="controls"></video>
</body>
|
cs |
또 다른 방법도 있습니다.
사실 다르다고 하기에는 내부 태그들은 같고 위치만 다른 정도입니다.
하지만 영상은 위의 소스와 아래 소스 모두 동일하게 출력됩니다~
|
1
2
3
4
5
6
|
<body>
<video controls="controls">
<source src="411.mp4" type="video/mp4">
</video>
</body>
|
cs |
두 방법 모두 적용한 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>비디오 출력</title>
</head>
<body>
<video src="411.mp4" type="video/mp4" controls="controls"></video>
<video controls="controls">
<source src="411.mp4" type="video/mp4">
</video>
</body>
</html>
|
cs |
VSCODE 적용화면:
'HTML & CSS' 카테고리의 다른 글
| HTML ID & CLASS 홀리그레일 (holy grail layout) (0) | 2021.11.07 |
|---|---|
| HTML 폼 태그 (form tag) (0) | 2021.11.04 |
| html 이미지 및 오디오 출력 (image, audio) (0) | 2021.11.03 |
| html 메뉴 리스트 (0) | 2021.11.03 |
| html 기본적인 태그들 (0) | 2021.11.03 |
댓글