वीडियो पर ओवरले प्ले बटन

Question

मेरे पास वर्तमान में एक ऐसी स्क्रिप्ट है जो एक वीडियो ऑनक्लिक बजाती है और रोकती है। मैं जो करना चाहता हूं वह शुरुआत में वीडियो पर एक प्ले बटन ओवरले करना है और जब इसे रोका जाता है, और उसी बटन के लिए गायब होने पर वीडियो गायब हो जाता है।

किसी भी सुझाव की सराहना की जाएगी।

एचटीएमएल

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

सीएसएस

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

जे एस

// Plays and pauses video on click 

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

Answer 1

मुझे लगता है मैं यह समझाने की जरूरत है केवल होगा।

जब .video क्लिक किया जाता है और वीडियो को रोकने ->
.video{visibility: hidden;}
जब .video क्लिक किया जाता है और वीडियो चल रहा है ->
.video{visibility: visible;}

आप अधिक कोड चाहते हैं, कृपया टिप्पणी

Answer 2

यदि आप सामग्री के साथ वास्तविक ओवरले रखना चाहते हैं, तो आप इसे संपादित कर सकते हैं: 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

क्लिक टॉगल पर भी ठीक से काम करेंगे ... और यह jQuery कोड कम हो जाएगा। .toggle()