동영상 완전 정복 ① - video태그

video 태그랑 유튜브 iframe만 고작 배워 시작한 신입,
고작 동영상 하나 넣는게 어찌나 탈이 많았는지 몰라요 😂
그런의미에서 동영상을 완.전.정.복 하기 위해 글을 써 봅니다. 

 

 

---

 

VIDEO 태그

웹사이트에 동영상을 적용하기 위해 사용되는 video 태그 🎬

HTML5가 생기면서 새로 나온 태그로, IE9부터 지원합니다.

 

1. 지원되는 비디오 형식

MP4	video/mp4
WEBM	video/webm
Ogg	video/ogg  (사파리 미지원)

 

ogg 파일은 사파리 브라우저 에서 지원이 되지 않기 때문에,

보통 mp4나 webm을 많이 사용해요.

사실 ogg 파일은 저도 한번도 써 본 적 없는 파일형식 이네요

 

 

2. MarkUp

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

<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>

위의 video 태그 옆으로 나열된 것들이 속성입니다. 자세한 내용은 아래 표를 통해 알아보겠습니다! 

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

가장 자주 사용되는 속성이 'autoplay' 인데요, 

이 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)을 사용해줘야 합니다.

따라서 jqeury를 활용할 때에는, 선택자.get(0).play(); 을 꼭 기억하세욥 !

 

이 스크립트는 

해당 위치에 왔을때, 동영상이 재생이 되도록 하는 동작을 만들거나,

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

 

플레이 버튼을 하나 만들어, 버튼 클릭 이벤트로 동영상을 제어할 때 활용 할 수 있을 것 같습니다! ㅎㅎ

$(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;

 

---

 

블로그를 처음 써보기도 하고, 

아직 공부해가고 있는 병아리 퍼블리셔여서 실수가 있을 수 있어요 😢
혹시 오류가 있거나, 공유해주고 싶은 정보가 있다면 댓글로 알려주세요! 

 

또, 새롭게 알게되는 내용들이 있다면, 꾸준히 업데이트 하겠습니다! 

🍊 감사합니다 🍊