[GELÖST] Über Thumbnail in Lightbox geöffnetes Video nach Abspielen automatisch schließen

3arthur5 · 17. Jan. 2017

Hallo,

hoffe hier endlich Hilfe für mein Problem zu finden.
Und zwar kann ich mit meinem Editor WebPlus über ein Thumbnail ein Video in der Lightbox öffnen. Jedoch möchte ich es auch automatisch schließen ( ohne den X-Button rechts oben anklicken zu müssen!). Eben VON SELBST!!!!
Mit einem anderen Programm VideoLightBox funktioniert das - Es erstellt dazu auch die entsprechende HTML-Seite sowie JS u. CSS-Dateien. Der Code müßte in der videolightbox.js sein und sollte in die wplightbox.js. Da ich JavaScript nicht wirklich beherrsche bringe ich das entsprechende Codeschnipsel nicht von der einen in die andere Datei.
Vermute, es ist auch nur ein kurzer Befehl an der richtigen Stelle, um abgespieltes Video und LightBox wieder in dem Thumbnail verschwinden zu lassen. Möchte auf jeden Fall meine Site mit dem WP-Editor fertigstellen.
Kann auf Wunsch HTML oder JS-Code zusenden.

Bedanke mich schon mal im Voraus-
es wäre mir wirklich sehr geholfen.

mikdoe · 17. Jan. 2017

unter welcher adresse kann man sich das anschauen?

kkapsner · 20. Jan. 2017

3arthur5 schrieb:
Jedoch möchte ich es auch automatisch schließen ( ohne den X-Button rechts oben anklicken zu müssen!). Eben VON SELBST!!!!

Wann oder durch was ausgelöst?

3arthur5 · 20. Jan. 2017

wann= nach Ende des Videos, was= DURCH DAS SCRIPT (code/CloseBefehl) an der richtigen Stelle, im richtigen Script.

Da der Editor aber etliche Scripten generiert u. die ewig lang sind, weiß ich auch nicht in was für einem und wo.

xorg1990 · 20. Jan. 2017

3arthur5 schrieb:
Da der Editor aber etliche Scripten generiert u. die ewig lang sind, weiß ich auch nicht in was für einem und wo.

Der Editor... das ist das Problem der Editor manscht Code zusammen und am ende weiß keiner was da gespielt wird.

ein video in einer Lightbox kann eigentlich nicht so schwer sein.

Man erstelle ein div width 100% height: 100%
z-index möglichst groß
BackgroundClor chucknorris
opacity 0.9
display: block

Den video tag gibt man eine Passende Width und Height
macht darauf margin: 0, auto
z-index eins großer als die Lightbox

Wen das video beendet ist triggert die onended Methode und Du stellst
Lightbox display auf none und das Video tag machst du auch auf display none
HTML Audio/Video DOM ended Event
Und
How To Create a Lightbox
So im Groben

3arthur5 · 21. Jan. 2017

Vielen Dank für die Tipps und Links.
Aber es ist noch nicht DAS was ich suche. Wundere mich auch, dass sonst noch niemand das Problem hatte (auch nichts Genaues gegoogelt!!!).
Wenn Ihr mal DIE "VideoLightBox" von: Video LightBox - Embed video to your website with beautiful Lightbox effect! ausbrobiert (leider wird man jetzt gleich weitergeleitet), könnt Ihr sehen wie komfortabel die Videos damit geschlossen werden und wie gut das aussieht. Möchte zu verschiedenen Themen viele Thumbnails in eine Tabelle stellen und je nach Thema können sich die User die einzelnen Videos öffnen - schließen wie gesagt von selbst. Dann sich das nächste reinziehen usw.........

xorg1990 · 22. Jan. 2017

Naja das Problem hatte noch keiner weil keiner diese Editoren nimmt.

"Zu Fuss" ist das doch viel schöner und mann lernt noch JS dabei.

Hier mal ein Minimalbeispiel:

Code:

<!DOCTYPE html>
<html>

<head>
	<title>Lightbox</title>
	<style>
	body{
		background-color: #dfdada;
	}
	#lightbox{
		/** Default lightbox to hidden */
		display: none;
		/** Position and style */
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.8);/** schwarz opacity 0.8 */
	}
	#videoElement{
		position: absolute;
		 z-index: 2;
		 width: 640px;
		 margin: 0 auto;
   		 display: block;
	}
	</style>
<script type="text/javascript">
function run(){
  var videoElement = document.querySelector("#videoElement");
  var lightbox = document.querySelector("#lightbox");

  videoElement.oncanplay = function() {
  		lightbox.style.display = "block";
  }

function hideLightbox(){
	lightbox.style.display = "none";
	videoElement.style.display = "none";
}

  videoElement.onended = hideLightbox;
  
  videoElement.onclick = function(){
  		videoElement.pause();
  		hideLightbox();
  }

  videoElement.onpause = hideLightbox;

  lightbox.onclick = hideLightbox;

}

</script>
	</head>
	<body onload="run()">
	<div id="lightbox"></div>
	<video  controls="controls" autoplay="autoplay" preload="none" width="640" height="360" id="videoElement">
		<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
	</video>
	</body>
	</html>

Leider klappt das mit den zentrieren über margin: 0 auto; nicht. Wenn einer weiß warum bitte melden interessiert mich.

Heir nochmal ein paar Reverenzen:
https://developer.mozilla.org/de/docs/Web/Guide/Events/Media_events
https://www.w3.org/2010/05/video/mediaevents.html

3arthur5 · 22. Jan. 2017

Danke für dein Script.
Doch, ich verwende diesen Editor!

Leider schließt dein Video überhaupt nicht. Hat keinen Schließen-Button; in den Hintergrund geklickt bleibt es auch offen.
Aber das Beste: "VON ALLEINE SCHLIESST ES SCHON GAR NICHT!!!!"

xorg1990 · 22. Jan. 2017

3arthur5 schrieb:
Hat keinen Schließen-Button; in den Hintergrund geklickt bleibt es auch offen.

Schließen Button musst du schon selber bauen.

Hintergrund geklickt war mein Fehler man muss es natürlich noch anhalten

Code:

lightbox.onclick = function() {
  	videoElement.pause();
  	hideLightbox();
  };

Eine stop() Funktion gibt es indes nicht.

3arthur5 schrieb:
Aber das Beste: "VON ALLEINE SCHLIESST ES SCHON GAR NICHT!!!!"

???
Habe FF und Chrome gestest das geht. Das video und die Lightbox sind weg, bei klick in den Hintergrund, bei klick auf video, bei klick auf den Play/Pause Button. Geht alles bei mir. Von alleine natürlich auch.

Was für ein Browser verwendest Du?

Interessant unter Windows/Firefox wird der oncanplay Event nicht gefeuert. Ununtu kein Problem
Da ist oncanplaythrough sicherer, also videoElement.oncanplaythrough= function()

Aber dennoch das video muss verschwinden. Geht sogar in Edge.

3arthur5 · 22. Jan. 2017

Wieder vielen Dank für deine Bemühungen.
ABER: In jedem Script steht wieder "onklick"!!!!!!!!!!!!!!!!!! Wenn ich bei meinem Video was anklick geht auch alles immer zu. ICH WILL ABER NICHTS ANKLICKEN - ÜBERHAUPT NICHT!!!! DAS VIDEO SOWIE DIE LIGHTBOX SOLL VON A L L E I N E ZUGEHEH!!!!!!
Versteht das wirklich niemand???? OHNE ANKLICKEN VON IRGENDWAS SCHLIESST SICH DAS VIDEO UND DIE LIGHTBOX VON ALLEINE WÄHREND ICH ZWEI METER WEIT WEG SITZE OHNE MAUS IN DER HAND!!!!!!!!!

mikdoe · 22. Jan. 2017

@3arthur5: deine Schreibweise wird als Schreien interpretiert wozu hier nicht der geringste Anlass besteht! Wir sind nicht deine Lackeien sondern opfern unsere Freizeit für dein Problem!

https://de.wikipedia.org/wiki/Netiquette

Also: konzentriere dich auf Rückfragen die dir gestellt werden und lass das Schreien sein!

xorg1990 · 22. Jan. 2017

Bleib doch mal ganz unruhig.

Deine Information ist angekommen, du möchtest das sich das video von alles schließt, verschindet, wie auch immer, wenn es zu ende ist.

der/das onended Event wird gefeuert wenn das video zu Ende ist und im meinem Beispiel wird hideLightbox() ausgelöst wodurch das video auf "display: none " gestellt wird. Also nicht anzeigen, es muss also verschwinden .

Die andren klick events habe ich nur eingebaut um das eventhandling zu verdeutlichen.

Du kannst nicht verlangen das sich ein video öffnet und sich dann NUR schließt indem man es BIS ZU ENDE ANSIEHT.

Ein bisschen Interaktion musst Du den Usern lassen.

xorg1190 schrieb:
Was für ein Browser verwendest Du?

- Wurde nicht beantwortet.

Wenn Du bis jetzt nur ein Browser getestet hast, dann nimm ein mal einen anderen.

Ansonsten wird kkapsner nochmal rüber schauen

Ich habe ja auch noch eine Frage offen:

xorg1190 schrieb:
Leider klappt das mit den zentrieren über margin: 0 auto; nicht. Wenn einer weiß warum bitte melden interessiert mich.

miniA4kuser · 22. Jan. 2017

@3arthur5: Das Beispiel von xorg1990 macht im Prinzip schon alles was du verlangst, hier aber nochmal etwas aufgeräumt, CSS-gepatcht, reduziert und kommentiert, damit auch du verstehen und nachvollziehen kannst was xorg1990 da für dich gebastelt hat:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Lightbox</title>
        <style>
        body{
            background-color: #dfdada;
        }
        #lightbox {
            /** Default lightbox to hidden */
            display: none;

            /** Dimensions */
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border: 0;

            /** Position and style */
            position: fixed;
            top: 0%;
            left: 0%;
            z-index:1001;

            /** background black opacity 0.8 */
            background-color: black;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }

        #videoElement {
            /** Dimensions */
            width: 640px;
            height: 360px;
            margin: -180px 0 0 -320px;
            padding: 0;
            border: 0;

            /** Position and style */
            position: fixed;
            top: 50%;
            left: 50%;
            z-index:1002;
            overflow: hidden;
        }
        </style>
        <script>
        function run() {
            var videoElement = document.querySelector("#videoElement");
            var lightbox = document.querySelector("#lightbox");

            // Show lightbox if video comes from browser cache and therefore
            // canplay and canplaythrough are not fired
            if (videoElement.readyState > 3) {
                    lightbox.style.display = "block";
            }

            // Show lightbox if browser is able to play the whole video
            videoElement.oncanplaythrough = function() {
                    lightbox.style.display = "block";
            }

            // Prevent bubbling up to lightbox container if video element receives
            // click event for pausing video etc.
            videoElement.onclick = function(e) {
                if (!e) {
                    e = window.event;
                }

                if (e.stopPropagation) {
                    e.stopPropagation();    //IE9 & Other Browsers
                } else {
                    e.cancelBubble = true;  //IE8 and Lower
                }
            };

            // Close lightbox if video ended or outside clicked on lightbox overlay
            videoElement.onended = lightbox.onclick = function () {
                videoElement.pause();
                lightbox.style.display = "none";
            };
        }
        </script>
	</head>

	<body onload="run()">
        <div id="lightbox">
            <video  controls="controls" autoplay="autoplay" preload="none" width="640" height="360" id="videoElement">
                <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
            </video>
        </div>
	</body>
	</html>

@xorg1990: Das wird wohl an deinem position: absolute; liegen. Wo soll es denn auch hin wenn du es absolut positioniert? Denkle mit position: relative; klappts besser.

3arthur5 · 22. Jan. 2017

Ja, vielen Dank minA4kuser.

HTML:

videoElement.onended = lightbox.onclick = function () {
videoElement.pause();
lightbox.style.display = "none";

wird wohl das gewesen sein was ich suchte!

mikdoe · 23. Jan. 2017

arthur: eine Entschuldigung gegenüber mini und xorg wäre angemessen gewesen!

xorg1990 · 23. Jan. 2017

miniA4kuser schrieb:
@xorg1990: Das wird wohl an deinem position: absolute; liegen. Wo soll es denn auch hin wenn du es absolut positioniert? Denkle mit position: relative; klappts besser.

hm ich dachte das habe ich ausprobiert.

Das Video Element in die LightBox zu packen ist natürlich auch die Idee.

// Show lightbox if video comes from browser cache and therefore
// canplay and canplaythrough are not fired

Echt, ist mir noch nie aufgefallen beim Audio Element. canplaythrough freute bei mir in Ubunt immer, canplay habe ich gestern erst gemerkt das es eben in Windows nur manchmal nicht ging, Ubuntu feuert das ebenfalls immer.

mikdoe schrieb:
arthur: eine Entschuldigung gegenüber mini und xorg wäre angemessen gewesen!

Las gut sein Micha. Habe auch nicht mein bestes gegeben, in der regel kommentiere ich Beispiele durch.

Allerdings war Sonntag und mein Wecker bimmelte heute 4:50. Da hab ich mich ein wenig beileit.

[GELÖST] Über Thumbnail in Lightbox geöffnetes Video nach Abspielen automatisch schließen

3arthur5

New member

mikdoe

Moderator

kkapsner

Super Moderator

3arthur5

New member

xorg1990

New member

3arthur5

New member

xorg1990

New member

3arthur5

New member

xorg1990

New member

3arthur5

New member

mikdoe

Moderator

xorg1990

New member

miniA4kuser

Lounge-Member

3arthur5

New member

mikdoe

Moderator

xorg1990

New member