Pause Bootstrap Karussell Wenn ein Video

Question

Abspielen Ich habe mehrere Folie mit Videos und Bildern. Das Karussell wird automatisch geladen, wenn es geladen wird. Aber wenn jemand ein Video spielt und die Maus aus der Seite bewegt, gleitet es (wie erwartet) weiter.

Wie behalte ich den Überblick, wenn ein Video läuft und pausiert? Ich habe die Suche nach SO aber keine ähnliche Frage gefunden.

Site-Administrator wird Video später hinzufügen, so dass sie Iframe oder HTML5-Video sein könnten. Also, ich brauche eine Lösung, die für beide funktioniert.

Answer 1

$ ("# myCarousel"). Karussell ('Pause'); , um es zu stoppen $ ("# myCarousel"). Karussell(); , um es wieder zu starten http://www.w3.org/2010/05/video/mediaevents.html dort viele Ereignisse sollten Sie es erneut starten sogar Pause, beendete Ereignisse werden ausgelöst und Pause beim Spielen.

für youtube im nicht sicher, wie Sie es integrieren, aber sie haben js api haben so https://developers.google.com/youtube/js_api_reference#Events werden Sie Ereignisse zeigen, dass Sie gleiche hören und tun können, wie u mit html5 Video

Answer 2

tat

Das ist für mich gearbeitet Unterbrechen Sie das Bootstrap-Karussell, wenn ein natives HTML5-Video abgespielt wird, und spielen Sie es erneut ab, wenn ein Video pausiert oder abgespielt wird. Ich bin ein absoluter JS-Neuling, aber ich habe ein paar Dinge zusammen gesucht und bespannt. Ich habe vielleicht einen Fehler gemacht (wahrscheinlich), aber es funktioniert für mich.

Ich rufe Videos nicht nach IDs an, weil ich möchte, dass die Aktion bei jedem Video funktioniert, das im Karussell abgespielt wird. Ich habe ein paar in meinem Fall.

Hinweis, um die ID des Karussells an Ihre zu ändern.

<script> 
$('video').on('play', function (e) { 
    $("#portfolioCarousel").carousel('pause'); 
}); 
$('video').on('stop pause ended', function (e) { 
    $("#portfolioCarousel").carousel(); 
}); 
</script>