Overlay Pulsante di riproduzione sul video

Question

Attualmente ho uno script che riproduce e mette in pausa un video onclick. Quello che mi piacerebbe fare è sovrapporre un pulsante di riproduzione sul video all'inizio e quando è in pausa, e per quello stesso pulsante sparire quando il video viene riprodotto di nuovo.

Qualsiasi suggerimento sarebbe apprezzato.

HTML

<video class="video"><source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4"> 
</video> 

CSS

.video { 
width: 50%; 
border: 1px solid black; 
} 

JS

// Plays and pauses video on click 

$('.video').click(function(){this.paused?this.play():this.pause();}); 

Answer 1

Penso che solo bisogno di spiegare questo.

quando .video si fa clic e il video è in pausa ->
.video{visibility: hidden;}
quando .video si fa clic e il video è in esecuzione ->
.video{visibility: visible;}

Se volete più codice, si prega di commento

Answer 2

Se si desidera avere una sovrapposizione effettiva con contenuti che è possibile modificare, forse questo è adatto a voi: https://jsfiddle.net/svArtist/9ewogtwL/

$('.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(); 
 
    } 
 
});

.video { 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 
.wrapper{ 
 
    display:table; 
 
    width:auto; 
 
    position:relative; 
 
    width:50%; 
 
} 
 
.playpause { 
 
    background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png); 
 
    background-repeat:no-repeat; 
 
    width:50%; 
 
    height:50%; 
 
    position:absolute; 
 
    left:0%; 
 
    right:0%; 
 
    top:0%; 
 
    bottom:0%; 
 
    margin:auto; 
 
    background-size:contain; 
 
    background-position: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <video class="video"> 
 
     <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" /> 
 
    </video> 
 
    <div class="playpause"></div> 
 
</div>

Answer 3

Al clic commutazione funzionerà bene troppo ... e ridurrà il codice jQuery. .toggle()