Overlay Videodan oynat düğmesi

Question

Şu anda onclick video oynatıp duraklatan bir komut dosyası var. Yapmak istediğim, videonun başındaki ve duraklatıldığında video üzerinde bir oynatma düğmesini ve video yeniden oynatıldığında aynı düğmenin kaybolmasını sağlamaktır.

Herhangi bir öneri takdir edilecektir.

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

Ben bu açıklamaya gerek sadece düşünüyorum.

.video tıklandığında ve video duraklatıldığında - .video tıklandığında>
.video{visibility: hidden;}
ve video çalıştıran - Eğer daha fazla kod istiyorsanız>
.video{visibility: visible;}

,

Answer 2

lütfen yorum Düzenleyebileceğiniz bir içerikle gerçek bir bindirmeye sahip olmak istiyorsanız, belki bu size uygun olacaktır: https://jsfiddle.net/svArtist/9ewogtwL/

Tıklama toggle günü 0

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

çok iyi çalışır ... ve jQuery kodu azaltacaktır. .toggle()