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>