반응형
웹사이트에 동영상을 표시하는 video 태그와 관련한 속성을 알아봅시다.
video 태그는 source 태그와 한 세트라고 생각합시다.
video 태그 사이로 source 태그를 넣고, src에 동영상 주소, type을 정해줍시다. 이는 브라우저가 .webm 형식의 동영상을 지원하지 않는다면, mp4 동영상으로 노출하게 하기 위해서입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<video controls autoplay loop muted preload="auto">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
type="video/webm" />
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
type="video/mp4" />
</video>
</body>
</html>
Q.
mp4만 올리면 되지 않나요?
A.
mp4만 올려도 되긴 됩니다만, 동영상의 확장자는 .avi, .ogg, .mkv, .webm 등 여러개가 있는데, 일반적으로 .webm이 화질도 좋으면서 용량이 적습니다. 동영상을 빨리 로드시키기 위해서는 용량이 적은게 좋구요. 요즘에는 .webm을 거의 호환하지만, 동영상이 재생되지 않을 경우를 대비하는 코드라 생각하면 됩니다.
그리고 나중에는 여러분이 직접 S3와 같은 웹저장소에 이미지나 동영상을 저장하게 될 때가 있는데, 용량이 작은게 돈이 덜나가요.
video의 태그에는 여러 속성이 있습니다
- controls: 비디오에 재생버튼, 음소거, 전체화면 표시 여부
- autoplay: 자동재생 여부(muted와 함께 사용하세요. 안하면 브라우저가 자동재생 못하게 막아요.)
- loop: 무한루프 재생 여부
- muted: 음소거 여부
- preload: 동영상을 미리 로드 여부(비용 최적화할때 사용하는데, 일단 몰라도 됩니다.)
- poster: 동영상 재생전에 이미지로 덮을지 여부(썸네일 같은거라 생각합시다.)
*비용을 생각하면, video를 바로 쓰지않고 Youtube를 임베딩해서 사용합시다.
웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요.
https://zabefofoon.github.io/mm-guide/
로또 번호 생성기도 만들었습니다. 한번 구경해보세요.
https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea
반응형
'Coding > Html' 카테고리의 다른 글
| Html table 태그 알아보기 (84) | 2023.12.26 |
|---|---|
| Html iframe 태그 알아보기(Youtube) (82) | 2023.12.25 |
| Html img 태그 알아보기 (78) | 2023.12.25 |
| Html div 태그 알아보기 (84) | 2023.12.25 |
| Html a 태그 알아보기 (78) | 2023.12.25 |
