jQuery Video-Overlay-Taste

Question

Ich habe versucht, einen Overlay-Play-Button für mein HTML 5-Video zu erstellen. Ich habe ein Beispiel erstellt auf Jfiddle - click here -Dies funktioniert gut. Ich habe versucht, meine Geige auf meiner Seite zu integrieren, aber ich erhalte die Fehlermeldung Cannot read property 'paused' of undefined. Glauben Sie, das hat etwas mit der Struktur meines Codes zu tun. Unten ist ein Ausschnitt davon, wie mein Code eingerichtet ist.

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

});

HTML

<div class="col-md-12 video"> 
      <video muted loop controls poster="/assets/casestudies/marketingandcomms/ukcoffeeweek/coffee-video-poster.gif"> 
        <source src="/assets/videos/coffee-video.mp4" type="video/mp4"> 
      </video> 
      <div class="playpause"></div> 

Kann mir jemand in die richtige Richtung?

Answer 1

Sie verwenden zwei verschiedene HTML-Strukturen mit falschen JQuery-Selektoren.

versuchen den folgenden HTML und JQuery Codes:

DEMO:https://jsfiddle.net/9ewogtwL/150/

<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> 

mit diesem JQuery-Code:

$('.wrapper').click(function() {  
    var videoEl = $(this).find("video").get(0); 
    if(videoEl.paused){ 
     videoEl.play(); 
     $(this).find(".playpause").fadeOut(); 
    }else{ 
     videoEl.pause(); 
     $(this).find(".playpause").fadeIn(); 
    } 
}); 

Answer 2

DEMO URL:JSBIN-DEMO

JQUERY

$('.video').on('click',function() { 
     $player=$(this).find("video")[0]; 
    if($player.paused){ 
     $player.play(); 
     $(this).find('.playpause').fadeOut(); 
    } 
    else{ 
     $player.pause(); 
     $(this).find('.playpause').fadeIn(); 

    } 
    }); 

HTML

<div class="col-md-12 video"> 
    <video muted loop controls poster=""> 
    <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4"> 
    </video> 
    <div class="playpause">PLAY</div> 
     <div>