저번 장에 이어 HTML의 멀티미디어 태그 중
video 태그에 대해 다뤄보도록 하겠습니다!
◈ <video>
-> HTML 파일에 비디오 파일을 추가할 때 사용하는 태그
기본 구조 : <video ~></video>
video 태그
듣기만 해도 어떤 의미로 쓰일지 감이 오시죠?
video 태그는 말 그대로 비디오 파일을 추가하는 태그입니다.
이전에 보았던 img와는 달리 닫는 태그를 통해 꼭 태그를 닫아주셔야 합니다! (</ 이거 기억나시죠?>)
일단 예시를 보고 얘기하겠습니다!
이 홈페이지의 6장을 참고하시면 됩니다!
Introducing-turtle
※ HTML 4장 ※ Cla in love Linda (플레이어) Cla in love Linda (무한 반복) ※ HTML 5장 ※ 이미지 예시 ※ HTML 6장 ※ 동영상 예시
jaeyonglee960212.github.io
잘 보고 오셨나요?
노래 비디오라 별로 흥미가 없으셨다면 죄송합니다 ㅜㅜ (가지고 있는 mp4 파일이 없더라고요 ㅜㅜ)
그래도 신기하긴 하셨죠?
자 이제 이 신기한 비디오를 어떤 코드를 통해 화면에 나타나게 했는지 알아보겠습니다.
자 코드를 보면 아시겠지만 뭐가 많이 적혀있죠?
하나하나 차근차근 설명해드리겠습니다.
<video controls 까지는 이해가 되실 겁니다!
만약 controls가 이해가 되지 않으신다면 저번에 4장에서 배운 controls와 속성이 같으니 html 4장을 참고해 주세요!
2021/03/02 - [html] - < html 공부 > 4장. HTML의 태그 (2) - 멀티미디어(audio)
< html 공부 > 4장. HTML의 태그 (2) - 멀티미디어(audio)
이번 장에서는 HTML의 멀티미디어 태그 중 하나인 audio 태그에 대해 다뤄보도록 하겠습니다! ◈ -> HTML 파일에 소리 콘텐츠를 추가할 때 사용하는 태그 기본 구조 : 오디오 태그는 말 그대로 오디오
introducing-turtle.tistory.com
그리고 그다음으로 나온 poster입니다.
poster는 비디오가 나오기 전 그 비디오에 관한 이미지 파일을 화면에 먼저 표출하는 것입니다.
저 코드로 다시 한번 설명하자면,
poster=".jpg"
즉, jpg 이미지를 동영상을 재생하기 전 가장 먼저 보이는 이미지로 설정하겠다는 것입니다.
(썸네일이라고 생각하시면 됩니다!)
다음으로 나오는 width는 넓이를 나타내 주는 속성입니다.
이 width 속성을 주지 않으면 어마어마하게 큰 비디오가 여러분의 HTML 파일에 나타나게 될 것입니다.(진짜예요)
그리고 마지막으로 다룰 source입니다.
source는 말 그대로 어떤 동영상을 어떻게 플레이하는지 알려주는 태그입니다.
source 안에 src를 이용해 동영상의 출처를 적고,
type을 이용해 그 동영상의 확장자명이 무엇인지 알려줍니다.
이제 저 코드가 어떻게 작성됐는지 아시겠죠?
혹시나 아직 이해가 안 되시는 분을 위해 저 코드를 다시 요약정리하자면,
나는 비디오 플레이어를 통해 비디오를 불러올 것이다.
썸네일은 .jpg 파일로 할 것이고, 동영상 플레이어의 크기는 600으로 정할 것이다.
비디오는 .mp4 파일을 쓸 것이고, 이건 mp4 파일로 읽어야 한다.
이렇게 얘기할 수 있습니다.
어때요? 이젠 확실히 이해가 되시죠?
자 이제 오늘 다룬 내용들을 최종 정리해보겠습니다.
<video> 태그는 HTML 파일에 비디오를 추가해 주는 태그이고,
꼭 </video>를 통해 닫아 주어야만 합니다!
video 태그 안에는 다양한 속성이 존재하는데
controls는 비디오를 제어할 수 있게 플레이어를 통해 화면에 표출한다는 속성
poster는 썸네일과 같은 기능을 하는 속성
width는 동영상의 크기를 조절하는 속성
src는 동영상을 어떤 동영상을 쓸지 정의하는 속성
type는 그 동영상이 어떤 확장자인지 정의하는 속성입니다.
이때까지, 많은 웹페이지에 올라오는 동영상들이
어떤 식으로 등록되었는지 대충 감이 오시나요?
하지만, 실제로는 저 video 태그 대신
iframe이라는 태그를 많이 사용하는데요!
다음 시간에는 저 iframe이라는 태그를 이용해
유튜브에서 직접 동영상을 불러와보겠습니다.
그럼 다음 장에서 봬요~
안녀어어어엉~~~~
출처 : 🎵저작권없는음악 웅장한음악 무료음원 무료BGM 다운로드 유튜브 배경음악 저작권없는브금(Epicness) - 나눔뮤직 Nanum Sound
https://youtu.be/pZRND1cjvTc
'html' 카테고리의 다른 글
| < html 공부 > 8장. HTML의 태그 (6) - a (0) | 2021.03.08 |
|---|---|
| < html 공부 > 7장. HTML의 태그 (5) - iframe (0) | 2021.03.06 |
| < html 공부 > 5장. HTML의 태그 (3) - 멀티미디어(img) (0) | 2021.03.03 |
| < html 공부 > 4장. HTML의 태그 (2) - 멀티미디어(audio) (0) | 2021.03.02 |
| < html 공부 > 3장. HTML의 태그 (1) - 텍스트 (0) | 2021.02.17 |