video 플레이어 버튼 이미지 넣기
HTML의 video 태그를 이용해서 비디오 플레이어의 재생이미지를 변경했습니다.
재생시 사라지고 , 정지일때 이미지가 보입니다.
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
var filter = "win16|win32|win64|mac|macintel";
var machine = "";
if ( navigator.platform ) {
if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) {
//mobile
//alert('mobile 접속');
machine = "m";
} else {
//pc
//alert('pc 접속');
machine = "p";
}
}
//alert(filenameCnt)
$('.video').parent().click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
document.getElementById('myVideo41').addEventListener('ended',myHandler1,false);
document.getElementById('myVideo41').addEventListener('pause',myHandler2,false);
function myHandler1(e) {
//alert(this.id)
//alert(e)
// What you want to do after the event
$("#"+this.id+"_pause").fadeIn();
}
function myHandler2(e) {
//alert(this.id)
//$("#"+this.id).pause();
//alert($("#myVideo"+i))
if(machine=="m"){
$("#"+this.id+"_pause").fadeIn();
}
}
})
</script>
<style>
.video {
width: 100%;
}
.wrapper{
display:table;
width:auto;
position:relative;
width:50%;
}
.playpause {
background-image:url(재생이미지를 넣어주세요.);
background-repeat:no-repeat;
width:20%;
height:20%;
position:absolute;
left:0%;
right:0%;
top:0%;
bottom:0%;
margin:auto;
background-size:contain;
background-position: center;
}
</style>
<div class="wrapper" style="width:100%;" >
<video class="video" controls muted id="myVideo41">
<source src="/upload/intro41.mp4" type="video/mp4" />
</video>
<div class="playpause" id="myVideo41_pause"></div>
</div>