Auto-Play-Attribut in HTML5-Videos umschalten

Question

Ich habe einige Overlays auf meiner Website mit HTML5-Videos. Standardmäßig sind die Overlays nicht sichtbar, aber sie können durch Klicken auf bestimmte Bilder aktiviert werden.

Wenn ein Overlay inaktiv ist, möchte ich, dass die HTML5-Videos auch inaktiv sind. Das ist keine große Sache. Wenn ein Overlay aktiv ist (es erhält die Klasse active), sollten die enthaltenen Videos das Attribut autostart erhalten. Wenn das Overlay erneut geschlossen wird, sollte das Attribut autostart aus den Videos entfernt werden.

// Check if there are videos who have a grandgrandparent with the class `.active` 
if ($('video').parents('.active').length) { 

    // Now I need the videos which suit this condition but I don’t know how 

    // Add autoplay attribute to all these videos 
    $(videos).prop('autoplay', true); 

} else { 

    // Remove the autoplay attribute from all videos when the parent doesn’t have the class active 
    $(videos).prop('autoplay', false); 

} 

Answer 1

Falscher Ansatz mit autostart ...

Ich kam schließlich mit der Verwendung von play(); und pause(); bis starten eine der Animation stoppen.

// Pause all videos by default 
$('video').each(function() { 
    $(this).trigger('pause'); 
}); 

// Start videos which have a parent with the class .active 
$('.active video').each(function() { 
    $(this).trigger('play'); 
});