비디오를 넣고 싶으면
우선 비디오 파일을 작업폴더안에 준비한다. 그리고
<video>
<source src="비디오파일경로">
</video>
이렇게 쓰면 비디오가 보인다.
하지만, 재생 버튼도 없고, 재생도 되지 않는다.
- 재생 버튼을 보이고 싶다면??
=> controls를 첨부하자
<video>
<source src="비디오파일경로" controls>
</video>
비디오를 넣는 법 2 (권장)
- source를 이용해서 video를 짚어넣은 방법의 이점
호환성이 생긴다.
비디오에는 mp4, avi, mkv 등 여러가지 확장자가 있다. 그러나, 브라우져마다 지원하는 비디오 확장자들이 다르다.
일부 mp4를 지원하지 않는 브라우져는 다른 video를 실행해라!! 이런 식으로 대안을 만들어 줄 수 있다.
// type은 옵션이다.
// 이 파일은 video이고 확장자는 mp4 에요 라고 알려주는 거다.
<video controls>
<source src="bridge.mp4" type="video/mp4">
<source src="bridge-m.avi" type="video/avi">
</video>=> "bridge.mp4"가 실행이 안 되면, "bridge-m.avi"를 넣으라는 뜻이다.
보통 가장 용량이 적은 확장자를 제일 위에다가 작성한다.
비디오 태그에 넣을 수 있는 속성
<video autoplay muted loop poster="썸네일경로" preload="metadata">
<source src="비디오파일경로">
</video>muted는 음소거상태
autoplay는 자동재생
( autoplay만 넣어서 작동을 안하면, muted와 함께 넣어주면 동작함 )
=> 브라우져 정책상 2개를 같이 써야 되는 경우가 있다고 한다.
poster는 썸네일이미지- 영상의 썸네일 이미지를 넣어주고 싶을 때 사용한다.
ex) poster="apple.jpg"
- 영상의 썸네일 이미지를 넣어주고 싶을 때 사용한다.
preload는 영상을 먼저 다운을 받을지 말지를 선택가능합니다
- (auto, metadata, none 사용가능)
auto : 미리 다운 ㄱㄱ
metadata : 미리 적당히 다운 ㄱㄱ (가장 좋은 속성)
none : 미리 다운 NO!!
-
loop은 비디오를 무한반복이외에도 여러가지 속성들이 있다.
더 자세히 알고 싶다면, 밑에 링크를 참고하자!
MDN video tag
비디오를 '배경'으로 쓰고싶다면
유행은 지났지만 어떻게 하는지 알아봅시다.
일반적인 Youtube 비디오 넣는 방법처럼 <iframe> 코드 복붙 이런게 아니라
비디오 파일을 직접 다운받아서 같은 폴더에 준비하고
다음처럼 레이아웃 짜면 됩니다.
<div class="video-box">
<video class="video-container" autoplay muted loop>
<source src="img/bridge.mp4" type="video/mp4">
</video>
<h3 class="video-title">Buy Our Shoes!</h3>
</div>
source 파일형식을 여러개 준비할 경우 브라우저에 최적화된 비디오 파일을 지가 알아서 넣으니
여러가지 확장자의 비디오 파일이 있으면 <source> 여러개 넣는 것도 좋은 선택입니다.
.video-box {
height: 500px;
width: 100%;
overflow: hidden;
position: relative;
}
.video-container {
position: absolute;
width : 100%;
top: 50%;
left: 50%;
transform : translate(-50%,-50%);
z-index: 0;
}어떤 요소를 궁극의 가운데정렬을 하고 싶을 때
저렇게 position absolute를 주고 top, left, transform 속성을 차례로 줍니다.
그럼 position relative를 가진 부모에 대해 정가운데 위치시킬 수 있습니다.
max-width, width 등으로 크기 조정을 넣는 것도 좋습니다.
여기까지만 하면 비디오가 배경처럼 크게 보이며
그리고 원하는 html을 <video> 하단에 적는 식으로 비디오 위에 글쓰고 그럴 수 있습니다.
배경용 큰 비디오 파일 https://drive.google.com/open?id=1RkCejA5MWkL54v2Wl-iybo8wXlu86zpl
하지만, 배경용 비디오는 로딩속도 문제도 있고 유행이 지났기 때문에 그냥 이런 게있다고 알아만두자!
오디오 넣는 법
비디오 넣는 법과 다르지 않다.
비디오 태그에 넣을 수 있는 속성도 동일하게 오디오 태그에 적용된다.
<audio src="/bass.mp3" controls muted autoplay></audio>audio에는 autoplay 기능이 적용되지 않는다. JS를 이용해서 강제로 실행하든가 해야한다.
오디오 넣는 법2 (권장)
비디오 태그처럼 호환성 문제로 <source>를 이용하는 것을 권장한다.
<audio controls muted autoplay>
<source src="/bass.mp3" type="audio/mp3" />
</audio>