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

고맙습니다. 유용한 팁을 공개해주셔서 감사드립니다.
프리미어에서 이미지, 음악을 불러와서 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 만드는 것이 성가시고 귀찮으시니 그냥 제 것을 사용하는 꼴이니 그리 효율적인 팁은 아니에요.

감사합니다.

@브러운아이 예 감사드립니다.

정말 기똥찬 소스코드 많이 올리십니다~ 이제 php 걸음마 떼고 있는 저로서는 신기하기만 하네요ㅎㅎㅎ

@코드오타쿠
감사합니다. 근데 이건 php 가 아니라 단순 html 로도 가능한 거라서...