안녕하세요. 오늘은 티스토리 블로그에서 MP4 영상을 업로드하고, 업로드한 게시글에서 바로 재생할 수 있도록 하는 방법에 대해 알아볼게요. 번거롭게 다른 곳에 올렸다가 링크를 가져와야 하는 방식이 아니라, 간편하게 사용할 수 있습니다.
또한, PC와 모바일 모두에서 영상이 화면에 맞게 자동으로 크기 조절되도록 할게요. 영상의 너비를 고정값으로 설정하면 영상의 고정값 너비가 모바일 화면보다 큰 경우, 아래와 같이 좌우 스크롤이 생기게 돼요. 그래서 별도의 스타일을 적용해야 하는데, 한 줄의 코드로 쉽게 처리할 수 있답니다.
참고로 너비를 100%로 설정하면 자동으로 조절되기 때문에 별도의 설정이 필요하지 않아요. 그러나 100%로 설정하면 작은 크기의 영상은 PC 화면에 맞게 크기가 커지므로 화질이 저하되죠. 이러한 이유로 고정된 너비 값을 설정하는 경우가 많아요.
아래에 보이는 영상처럼 자동으로 재생되고, 재생이 끝나면 다시 반복 재생이 됩니다. 너비는 고정값 640px로 설정되어 있고, 모바일 환경에서도 화면 크기에 맞게 자동으로 조절돼요.
1. MP4영상 파일 첨부
2. 첨부한 MP4파일 우클릭 후 링크 주소 복사
3. HTML블록 추가 하기
영상 너비를 고정값으로 설정할 때는 div 태그로 video 태그를 감싸고 해당 div에 스타일을 적용해 주면 돼요. 아래 예시에서는 max-width 값을 640px로 설정했어요. 이 부분만 원하는 값으로 변경하시면 됩니다. 영상의 너비를 100%로 맞추고 싶다면, video 태그만 사용하면 됩니다.
<div style="width:100%; max-width:640px; height:auto; overflow:hidden;">
<video style="width:100%; height:auto;" autoplay loop muted playsinline>
<source src="첨부파일 링크주소" type="video/mp4">
</video>
</div>
4. MP4 첨부파일 블록 숨기기
파일을 첨부하고 html 모드에 들어가면 다음과 같은 코드가 생겨요.
//파일첨부시 생성되는 태그
<p>[''##_File|xxx~/tfile.mp4|filename="영상명.mp4" size="0.49MB" data-ke-align="alignLeft"|_##'']</p><p> 태그를 <div>로 변경 후 style을 추가해 주면 돼요.
- "opacity: 0;"은 첨부파일 블록을 완전히 투명하게 만들어 줘요. 눈에는 보이지는 않지만 클릭해서 첨부파일을 다운로드할 수 있어요.
- "dispaly:none;"을 사용하면 첨부파일 블록이 완전히 사라지게 돼요.
//p태그를 div로 변경후 style="opacity: 0;" 추가
<div style="opacity: 0;">[''##_File|xxx~/tfile.mp4|filename="영상명.mp4" size="0.49MB" data-ke-align="alignLeft"|_##'']</div>
저는 opacity:0을 적용해서 눈에는 보이지 않지만, 영역을 클릭하면 다운로드할 수 있도록 했어요.
(해당 라인 바로위에 첨부파일 존재)
이번 시간에는 MP4 영상을 업로드하고 자동 재생 및 반복 재생 하는 방법을 알아봤는데요. 일반적으로 MP4 비디오는 같은 품질의 GIF에 비해 파일 크기가 훨씬 작아요. 이는 페이지의 로딩 시간을 줄일 수 있고, 구글의 검색엔진 최적화(SEO) 평가에서도 더 높은 점수를 받을 수 있어요. 따라서 가능하다면 GIF 대신 MP4를 사용하는 것을 권장합니다! - 끝 -
