움짤을 동영상으로 바로 올려버리는 방법(움짤동영상)

● 움짤 동영상?

---

인터넷을 돌아다니면 움짤인데 동영상으로 재생되는 경우를 많이 봤을 것입니다.

예를 들자면,

 

 

 

 

이런식으로 마우스를 올리면 재생바가 보이지만 마우스를 떼면 기존 gif 과 동일하다.

심지어 화질까지 더 좋다!

아래와 비교해 보자.

 

 

GIF 이미지

 

 

확실히 차이 나는 것을 볼 수 있다.

그럼 어떻게 하는 것인지 알아보도록 하자.

 

 

 

● 움짤 동영상 만드는 방법

---

필자가 쓰는 방식대로 설명하겠다.
주로, 난 사이트에서 영상링크를 따오고 html 태그로 영상을 반복 재생 시킨다.
글로만 설명 해봤자 모를 것이다 나도 그랬다...
사진과 움짤로 설명하겠다 잘보고 따라하면 쉽게 할 수 있다.

 

 

STEP.1

움짤을 주로 올리는 사이트인 https://gfycat.com/ko/ 이곳을 이용하겠다.

들어가보면 위에 검색창과 수많은 움짤들이 보일것이다.

검색창에 원하는 키워드를 검색하여 원하는 움짤을 찾아도 되지만 직접 올려도 된다.

Gfycat | Watch and Create GIFs, Videos, Memes

 

gyfcat 사이트 메인화면

저 위의 빨간 동그라미 쳐진 곳을 보면 업로드 버튼이 있다.

단순 업로드에서 파일선택을 누르고 업로드하면 된다.

아, 꼭 동영상 파일이 아니어도 된다.

gif 파일도 가능하다.아래를 보고 따라해봐도 될것이다.

 

참 쉽쥬?

 

 

STEP.2

 

방금 업로드 하였던 동영상을 클릭하고 켜진 동영상에 '우클릭'을 합니다.

우클릭을 하면 '동영상 주소 복사'가 있을텐데 그것을 클릭!

모르겠으면 아래 영상을 보고 따라하면 되겠다.

 

 

 

 

STEP.3

 

이젠 HTML을 활용하여 붙여넣어주기만 하면 된다!

 

 

티스토리 블로그 글쓰기 화면

티스토리 글쓰기로 들어오면 오른쪽 위에 '기본모드'라고 되어 있을텐데,

눌러서 'HTML'로 바꾸어 준다.

(꼭 티스토리가 아니어도 네이버나 카페 등등 html 이 되는 모든곳에 사용 가능하다.)

html 화면

HTML 화면에 들어왔으면

저기 적혀있는 영어들 다음 줄에 대충 아래 코드를 붙여넣어 준다.

<video src="동영상주소" autoplay="autoplay" loop="loop" controls="controls" width="100%" height="100%"></video>

  

 

붙여넣은 화면

 

 

<video src="동영상주소" autoplay="autoplay" loop="loop" controls="controls" width="100%" height="100%"></video>

이제 우린 여기에서 "동영상주소"에 아까 복사했던 동영상 주소를 붙여넣기 해주면 된다.

<video src="https://thumbs.gfycat.com/RemoteSereneAmericancurl-mobile.mp4" autoplay="autoplay" loop="loop" controls="controls" width="100%" height="100%"></video>

마무리로, 오른쪽 위의 'HTML'을 '기본모드'로 바꿔주면 끝이다.

 

그럼 귀여운 고양이가 나온다 

 

 

---

 

-번외편-

아마 영상이 제대로 나온다면 영상크기가

인터넷 브라우저 크기에 따라 늘어났다가 줄어들었다가 할것이다.

이것이 싫고 고정되게 하고 싶다 하는 분들은 

 

 

width="100%" height="100%" 이것을 이렇게-> width="640" height="370"

(width 는 영상의 너비, height 는 영상의 높이이다. )

<video src="동영상주소" autoplay="autoplay" loop="loop" controls="controls" width="640%" height="370%"></video>

이렇게 바꿔주면 된다.