video태그

웹사이트에 동영상을 적용하기 위해 사용되는 video 태그.
HTML5가 생기면서 새로 나온 태그로, IE9부터 지원한다.

1. 지원되는 비디오 형식

MP4 -> video/mp4

WEBM -> video/webm

Ogg -> video/ogg(사파리 미지원)

ogg 파일은 사파리 브라우저 에서 지원이 되지 않기 때문에,
보통 mp4나 webm을 많이 사용한다.

2. 마크업 구조

Type1.

<video src="../img/video.mp4" type="video/mp4" ></video>

Type2.

<video>
	<source src="../img/video.mp4" type="video/mp4">
</video>

vedio 태그 사이에 텍스트도 넣을 수 있는데, 그 텍스트는 비디오가 지원 되지 않는 환경에서만 보인다.
"해당 브라우저 환경에서는 비디오가 지원되지 않습니다" 와 같은 문구를 넣어주어도 좋을듯.

3. 속성

<video controls autoplay muted loop>
  <source src="../img/video.mp4" type="video/mp4">
</video>

비디오 태그에는 위와같이 속성을 넣어 자동재생, 미리보기 이미지 등을 설정 할 수 있다.

비디오 태그	속성
autoplay	비디오 자동재생
controls	하단 재생바 ( 플레이, 중지, 음량, 자막, 전체 화면 등등 포함 ) 표시
loop	반복 재생
muted	음소거 설정
poster	동영상 재생 전 표시 이미지(Url값)
preload	페이지가 로드 될 때, 비디오 파일 로드 여부(auto, metadata,none)
width/height	가로/세로 값 - css로도 설정 가능

autoplay 를 통해 자동재생을 하기 위해서는 꼭 muted 설정을 해주어야한다.(소리가 있는 상태에서는 자동재생 불가)
이 두가지 속성으로 모바일 환경에서도 자동재생이 가능한데,
아이폰의 경우, 저전력 모드일때는 자동재생이 되지 않는다.
그리고, 브라우저 사용자 옵션으로 자동재생을 차단한 경우에도 자동재생이 되지 않는다.
가끔 모바일 환경이나 인터넷이 느린 환경에서, 동영상 로딩이 시간이 걸리는 경우가 있는데,
그런 경우를 대비해서, poster 태그도 설정을 해주는 것이 좋다.
preload 태그는 자동재생( autoplay )이 설정된 경우, 무시된다.

4. 관련 스크립트

video 태그 관련, 스크립트 동작.

선택자.load() : 동영상 로드
선택자.play() : 동영상 재생
선택자.pause() : 동영상 일시정지

JavaScript

document.getElementsByTagName("video").load();
document.getElementsByTagName("video").play();
document.getElementsByTagName("video").pause();

jQuery

$('video').get(0).load();
$('video').get(0).play();
$('video').get(0).pause();

jQuery에서 $('video').play(); 로만 실행하면 안됨.
이는 DOM요소의 함수이기 때문에, 객체와 일치하는 DOM 요소를 가져오기 위해 get(0)을 사용해줘야 함.

사용예시

1. 해당위치에 왔을 때, 동영상 재생이 되도록 하는 동작

$(function(){
	$(window).scroll(function(){
		var videoTop = $('video').offset().top;
		var video = $("video");
        
		if( $(document).scrollTop() > videoTop ){
			video.get(0).play();
		}
	});
});

2. 버튼 클릭 이벤트로 동영상 제어

$(function(){
	$(window).scroll(function(){
		var video = $("#visVideo");
		var btn = $(".btn_play");
        
		btn.click(function(){
			video.get(0).play();
		});
	});
});

번외

동영상 플레이 속도 조절 -> .playbackRate

// javascript
document.querySelector('.video').playbackRate = 2;

// jquery
$('.video')[0].playbackRate = 2;

---

참고 및 출처