그누보드 - gif 와 mp4사운드 html 로 결합하기

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>

댓글 8개

김철용 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

22.08.02 00:47:47

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

view.skin.php

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


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

view.skin.php

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

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

비타주리 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

22.08.02 03:06:03 모바일

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