곧바로 재생되는 MP4 영상 넣기
지난번 포스팅에서는 라이브포토로 GIF를 만들어 올리는 방법을 소개한 적이 있습니다. GIF는 오래된 파일 형식이고 용량 대비 표현의 한계가 있기 때문에 동영상을 '움짤'로 만들 수 있는 방법을 찾았는데요. GIF 파일을 올리는 것보다 번거롭지만 효과는 확실한 방법이 있었습니다.
참고 링크
티스토리에서 GIF대신 MP4를 이용하는 방법
이전에 움직이는 이미지 mp4로 표시하기 포스팅에서 GIF대신 MP4가 훨씬 좋은 이유를 포스팅한 적 있다. 티스토리에서 글쓰기로 GIF대신 MP4를 쓰는방법 먼저, 공식 글쓰기에서 지원하는 게 아니기
tistory.hi098123.com
구글링을 해보니 필요한 내용이 곧바로 나왔기에 바로 포스팅에 적용해 보았습니다.
동영상 파일 용량을 10MB 이하로 맞추기
저는 아이폰+맥 유저이기에 사진앱에서 찍어 놓은 동영상을 바로 긁어옵니다. 영상의 용량이 10MB를 넘는 경우 영상 길이를 잘라도 되지만 여의치 않다면 용량을 줄이기 위해 인코딩 프로그램으로 옵션을 조절하여 다시 인코딩합니다.
저는 어도비 마스터컬렉션을 구독 중이기에 Encoder를 써서 재인코딩하여 파일 용량을 줄입니다. 동영상 코덱을 바꾸거나 사이즈를 바꾸는 등 여러 옵션으로 파일 용량을 줄여볼 수 있습니다. 저는 목표 비트 전송률을 줄여서 예상 파일 크기를 10MB 이하로 맞추어 인코딩을 합니다.
사용 중인 유료 프로그램이 없다면 다음팟 인코더로도 충분할 것 같습니다. 학생 때 종종 쓰던 무료 인코딩 프로그램입니다.
티스토리 어딘가에 동영상 파일을 업로드하기
티스토리에는 10MB 이하 파일은 업로드가 가능하며 파일 링크로 다른 티스토리 웹페이지에 띄우는 것이 가능한데요. 동영상 파일을 올려둘 공간용으로 비공개 페이지 포스팅을 하나 만듭니다. 포스팅을 만들어서 써도 되지만 티스토리에는 페이지라는 기능이 있고 포스팅과 구분되어 있기에 저는 비공개용 글이 필요할 때는 페이지를 활용합니다.
앞으로도 동영상을 많이 올릴 수 있기 때문에 색인용으로 동영상 사용처를 따로 달아주고 있습니다. 꼭 티스토리가 아니더라도 파일을 올려서 권한 제한 없이 파일 주소로 활용할 수 있는 공간이 있다면 어디든 상관없습니다. 비공개 발행 후 페이지에 들어가서 동영상 파일 다운로드 버튼을 오른쪽 클릭 후 파일 주소를 복사해 줍니다.
HTML블럭으로 동영상 스크립트 넣기
동영상 삽입에도 HTML블럭을 유용하게 사용할 수 있습니다. 아래의 코드를 HTML블럭으로 넣어줍니다.
<video style= "width: 100%;" autoplay loop muted playsinline>
<source src="동영상 파일 링크">
</video>
"동영상 파일 링크"에 복사한 링크 주소를 붙여넣어주면 됩니다. autoplay loop muted playsinline 이라는 부분은 GIF와 같이 자동재생, 반복 재생, 음소거, 전체화면 없이 인라인에서 재생의 의미로 보시면 되겠습니다.
로딩이 있긴 하지만 10MB 이하의 파일이기 때문에 빠르게 재생이 됩니다. GIF보다 훨씬 고화질로 나오기 때문에 만족스럽습니다.
티스토리 앱에서 확인해 보니 페이지에 진입하면 동영상이 전체화면으로 자동재생되는 문제를 확인했습니다. 모바일에서는 동영상 자동 재생을 막아서 해결이 가능하지만 티스토리 앱이 아닌 모바일 웹에서는 잘 작동하기 때문에 자동재생을 막기에는 아쉽네요. 이 부분은 해결이 가능할지 동영상 방식을 내려야 할지는 고민 중입니다.