gif 와 mp4사운드 html 로 결합하기 > 그누보드5 팁자료실

그누보드5 팁자료실

gif 와 mp4사운드 html 로 결합하기 정보

gif 와 mp4사운드 html 로 결합하기

본문

1. 본인이 원하는 gif 이미지를 만듭니다.

반드시 960-540 사이즈로 만들어 주세요.

예제 - https://blog.kakaocdn.net/dn/bkCMlv/btrIEbZacGU/am9n92fCQNE5u1xciD4ik0/img.gif

 

----------

 

2. 블랙사운드 mp4 를 만들고 투명 png 파일을 다운로드 받습니다.

만드는 방법 - https://cafe.daum.net/gnuworld/ZMgZ/2

 

----------

 

3. 아래의 코드로 적용시킵니다.

 


<style>
#gifDiv { position:relative; width:100%; max-width:960px; margin:0 auto; }
#gifImg { display:block; width:100%; }
#mp4Sound { display:block; position:absolute; width:100%; top:0px; mix-blend-mode:screen; }
#mp4Sound::-webkit-media-controls-fullscreen-button { display: none; }
#fullscreenBlock { display:block; position:absolute; width:100%; bottom:70px; }
@media screen and (hover:none) and (pointer:coarse) { #fullscreenBlock { display:none; } }
</style>
<div id=gifDiv>
<img id=gifImg src="gif경로">
<video id=mp4Sound src="블랙mp4경로" autoplay loop controls controlslist=nodownload></video>
<img id=fullscreenBlock src="투명png경로">
</div>
추천
5

댓글 6개

고맙습니다. 유용한 팁을 공개해주셔서 감사드립니다.
프리미어에서 이미지, 음악을 불러와서 mp4로 만들었는데요.
단일 이미지비디오를 이렇게 간단하게 만드는 방법이 있었네요. 신기합니다.
게시판에 넣으면 밋밋한 게시판이 풍성해지겠다는 생각을 합니다.
비타주리님께서 공개해주시는 자료는 다양하게 활용할 수 있어서 참 좋습니다. ^^
http://gratia.kr/bbs/board.php?bo_table=lightbox_slide&wr_id=1

view.skin.php
<!--    gif_mp4 -->
    <style>
#gifDiv { position:relative; width:100%; max-width:960px; margin:0 auto; }
#gifImg { display:block; width:100%; }
#mp4Sound { display:block; position:absolute; width:100%; top:0px; mix-blend-mode:screen; }
#mp4Sound::-webkit-media-controls-fullscreen-button { display: none; }
#fullscreenBlock { display:block; position:absolute; width:100%; bottom:70px; }
@media screen and (hover:none) and (pointer:coarse) { #fullscreenBlock { display:none; } }
</style>
 
<div id=gifDiv>
<img id=gifImg src="<?php echo $view['wr_9']; // gif 이미지  ?>">
<video id=mp4Sound src="<?php echo $view['wr_10']; // mp4 영상  ?>" autoplay loop controls controlslist=nodownload></video>
<img id=fullscreenBlock src="<?php echo $view['wr_8']; // 투명이미지  ?>">
</div>
<!--    gif_mp4 -->

write.skin.php   
<input type=text class="frm_input full_input" name="wr_9" value="<?php echo $write['wr_9']; ?>" placeholder="gif 이미지:wr_9">
<input type=text class="frm_input full_input" name="wr_10" value="<?php echo $write['wr_10']; ?>" placeholder="mp4 영상:wr_10">
<input type=text class="frm_input full_input" name="wr_8" value="<?php echo $write['wr_8']; ?>" placeholder="투명이미지:wr_8">

제가 이 바닥에 입문한 동기가 멋진 미디어를 만드는 것에 호기심이 나서였습니다.ㅋ
음악을 원체 좋아하거든요.
투명이미지는 굳이 여분필드가 필요없이 코드안에 바로 주시면 됩니다.
수정이 필요없으니까요.
이 투명이미지의 역할은 블랙동영상의 더블클릭 전체화면기능을 막으려고 넣은 거에요.
풀스크린이 되면 블랙화면만 가득찰텐데 그걸 방지하기 위해  동영상 위를 덮은 것이죠.
코드가 좀 난잡한데 다음카페도 가능하게 하느라 수가 없었습니다.
거긴 css 제약도 크더라구요.

사실 이건 포토샵으로 gif 만드는 노가다를 해야 해서 별로 실전적이지는 못합니다.
당장 철용님도 본인이 gif 만드는 것이 성가시고 귀찮으시니 그냥 제 것을 사용하는 꼴이니 그리 효율적인 팁은 아니에요.
전체 2,152 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT