Einblenden nach Videoende

saibotekcirf schrieb am 20.09.2016 um 22:44 Uhr

Hallo liebes Forum,

auf meiner Homepage lasse ich mittels Autoplay ein Video beim Aufruf der Seite starten. Nach Beendigung des Videos möchte ich gerne, dass ein Rechteck mit einem Text erscheint, welches quasi über das Video gelagert ist. Ich habe gedacht, dass ich dies über die Animation regeln kann, aber Pustekuchen.

Hat jemand eine Idee, wie man so etwas realisieren kann?

Vielen Dank für eure Hilfe und Rückmeldungen!

Lieben Gruß

Tobias

Kommentare

BeRo schrieb am 20.09.2016 um 23:56 Uhr

Der Aufwand, den Du dafür treiben musst, ist in 1. Linie davon abhängig, ob Du das Video per HTML5 einbindest oder als Flash Video.

Die HTML5 Variante ist deutlich leichter zu manipulieren.
Wie z. B. nach dem Ende eines Videos eine Weiterleitung auf eine andere HTML Seite gemacht werden kann, dass habe ich hier ganz detailliert beschrieben.

Das JScript aus der Lösung kannst Du für Deine Zwecke leicht anpassen, wenn Du die Funktion "weiter()", die beim Ende des Videos automatisch aufgerufen wird, dazu benutzt, eine popup Ebene zu öffnen, auf der Du die gewünschte Text Info abgelegt hast.
Liegt diese popup Ebene direkt über der MouseOver Ebene, dann hat sie i. d. R. den Indexwert 4. In dem Fall kann das angepasste Script für die Funktion "weiter()" so aussehen:

------------------------------
<script type="text/javascript">
function weiter() {
xr_cpu(4);
}
</script>

------------------------------

Willst Du den Effekt für ein FLV (Flash) Video umsetzen, solltest Du einen alternativen Flash Player einbauen, der eine JScript API Steuerung anbietet. Über diese Schnittstelle kannst Du den Player so anpassen, dass er nach dem Abspielen des Videos eine von Dir definierte Funktion ausführt.
Sinnvoll ist das aber nicht, da die Ära der Flash Videos so langsam zu Ende geht. Die meisten mobilen Geräte können heute solche Videos nicht mehr anzeigen...

Arbeite Dich mal in das Thema ein und wenn dann noch Fragen auftauchen, weißt Du ja wo Du Infos bekommen kannst.

Viel Erfolg

Zuletzt geändert von BeRo am 20.09.2016, 23:57, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

saibotekcirf schrieb am 21.09.2016 um 22:02 Uhr

Guten Abend BeRo,

zunächst einmal vielen lieben Dank für deine Rückmeldung und gleich mal ein Lob an dich, da ich das Gefühl habe, dass du hier sehr aktiv bist und mir und andere schon des Öfteren mit deinen Beiträgen sehr weitergeholfen hast  

Nun aber zurück zu dem Thema 

Ich habe mir dein Beispiel angeschaut und folgendes gemacht:

1. bei dem Platzhalter für das mp4 video (HTML5)  in dem HTML-Body den Code eingefügt:

2. dann habe ich unter "Eigenschaften der Webseite" unter HTML-Head den Code eingefügt:

-----------------------------------------------------------------------------------------------------------------------------------------------<script type="text/javascript"> 

function weiter() {

xr_cpu(4);
}
</script>

-----------------------------------------------------------------------------------------------------------------------------------------------

3. dann ein Rechteck erstellt mit dem Text und beides in eine neue Ebene gepackt die da heißt "Popup". Die neue Ebene befindet sich exakt oberhalb der MouseOver-Ebene.

...doch irgendwie funktioniert das nicht. Da Rechteck mit dem Text ist gleich beim Aufruf der Seite zu sehen. Was genau habe ich also nicht richtig umgesetzt?  

Dann gleich noch die Anschlussfrage: Ist es auch möglich mehrere Rechtecke mit Texten nach Beendigung des Videos kurz nach einander anzuzeigen? Ich vermute mal, das erste gezeigte Rechteck wird mit deinem JS-Code angezeigt und die restlichen dann über eine Animation? Achja...wenn wir schon mal bei Animationen sind...besteht auch die Möglichkeit, das erste angezeigte Rechteck ebenfall nicht nur einzublenden, sondern auch mit einer Animation zu versehen, zum Beispiel "Zoom/Einblenden"

Lieben Gruß

Tobias

 

BeRo schrieb am 21.09.2016 um 23:20 Uhr

[...] Was genau habe ich also nicht richtig umgesetzt? [...]

Der Hauptteil des Codes, den Du als Antwort eingefügt hast ist wahrscheinlich nur ein Teil des Gesamtcodes?! Ansonsten kann er nicht funktionieren.

Dass die eingebundene Funktion "weiter()" nicht den gewünschten Effekt zeigt, liegt wohl daran, dass Du die Ebene, die den Infotext zeigen soll, noch nicht zur popup Ebene gemacht hast. In dem Fall ist es korrekt, dass der Ebenen Inhalt schon beim Öffnen der Seite angezeigt wird.

Damit eine zusätzlich erstellte Ebene zur popup Ebene wird, musst Du einen Link dahin legen. Das geht sehr einfach, wenn Du einen Dummy Button erstellst und dem Button einen Link auf die Ebene verpasst. In Deinem Fall ist das die Ebene, die Du "Popup" genannt hast.

So kann das im Editor aussehen:



Anschließend öffnest Du die Vorschau und positionierst den Mauszeiger auf den Dummy Button. In der Fußzeile siehst Du am linken Rand den Index Wert für das Link Ziel (die popup Ebene). Hier ist das der Wert "xr_cpu(4)".

Möchtest Du mehrere popup Ebenen anlegen und per Script steuern, kannst Du mit der Methode sehr leicht die jeweils korrekten Indexwerte auslesen.

Hast Du Dein JScript (die JS Funktion "weiter()"), mit dem richtigen Indexwert gefüttert, solltest Du den Dummy Button außerhalb des sichtbaren Seitenbereichs positionieren. Er darf nicht gelöscht werden, weil sonst die popup Eigenschaft Deiner neu angelegten Ebene verloren geht!

Wie Du mehrere popup Ebenen zeitgesteuert, nacheinander anzeigen kannst, das habe ich Anfang letzten Jahres in diesem Kommentar ausführlich erklärt. Das da geschilderte Verfahren ist recht universell einsetzbar und sollte auch für Dein Vorhaben passen...

Edit: 22:05 h

Deine 3. Frage habe ich übersehen.

[...] besteht auch die Möglichkeit, das erste angezeigte Rechteck [...] mit einer Animation zu versehen [...]

Aber ja...

Probier's mal

Viel Erfolg

Zuletzt geändert von BeRo am 22.09.2016, 22:05, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

saibotekcirf schrieb am 27.09.2016 um 22:03 Uhr

Hallo BeRo,

soweit funktioniert alles ganz gut. Ich habe fünf Pop-Up-Ebenen, die nun bei Videoende zeitgleich mit einer Animation eingeblendet werden. Das mit der Zeitsteuerung habe ich noch nicht so ganz verstanden. Könntest du mir da noch einmal behilflich sein?  

Im HTML-Head der Seite habe ich nun folgende Code:

 

<script type="text/javascript">

function weiter() {

xr_cpu(8);
xr_cpu(9);
xr_cpu(10);
xr_cpu(11);
xr_cpu(12);

}
</script>

 

Irgendwie habe ich es nicht geschafft in diesen Code das mit der Zeitsteuerung (Function Timer) einzubauen 

Achja...und dann habe ich noch eine Frage: Nach dem das Video zu Ende ist, hat man ja die Möglichkeit, sich das Video dann ja noch einmal anzuschauen, wenn es gewollt ist. Da nun aber die PopUps nun eingeblendet sind, sieht man das Video leider nun nicht mehr. Besteht die Möglichkeit, dass, wenn das Video erneut gestartet wird, dass die PopUps wieder verschwinden und dann wieder nach Beendigung des Videos wieder auftauchen???  ...vielen lieben Dank für deine Hilfe.

Gruß

Tobias

BeRo schrieb am 28.09.2016 um 12:52 Uhr

[...] Das mit der Zeitsteuerung habe ich noch nicht so ganz verstanden [...]

Um die popup Ebenen nacheinander, mit einem Zeitversatz aufzurufen, kannst Du eine vordefinierte Timerfunktion verwenden, so, wie ich das hier, in dem verlinkten Thread erklärt habe.

Für Deinen "Fall" musst Du nur dafür sorgen, dass die popup Ebenen alle in der Funktion aufgeführt werden. Das kann z. B. so aussehen:

----------------------------------------
<script type="text/javascript">
function Timer(){
setTimeout("xr_cpu(8)", 500);
/* popup nach 0,5 Sek. */
setTimeout("xr_cpu(9)", 1000); /* nächstes popup nach 1 Sek. */
setTimeout("xr_cpu(10)", 1500); /* nächstes popup nach 1,5 Sek. */
setTimeout("xr_cpu(11)", 2000); /* nächstes popup nach 2 Sek. */
setTimeout("xr_cpu(12)", 2500); /* nächstes popup nach 2,5 Sek. */
setTimeout("xr_ppc('xr_xp8')", 6000); /* schließt popup 8 nach 5,5 Sek. (6-0,5=5,5)*/
}
</script>

--------------------------------------

Die neu geschaffene Funktion "Timer()" rufst Du mit der bekannten Methode nach dem Ende des Videos auf

-------------------------------------
[...]
onended="Timer()"/>
[...]
------------------------------------

Klar, dass damit die bisher genutzte Funktion "weiter()" komplett entfällt

Die oben im JScript blau markiert Option zum Schließen einer popup Ebene ist optional. Du kannst Sie weglassen oder um weitere popup Ebenen ergänzen, wenn Du sie automatisch schließen lassen willst.

[...] Besteht die Möglichkeit, dass, wenn das Video erneut gestartet wird, dass die PopUps wieder verschwinden [...]

Das kannst Du ganz einfach realisieren, wenn Du die Seite neu lädst. Am besten geht das mit einem kurzen JScript, das Du als Link einem Button zuweist.

Der dafür nötige Eintrag sieht so aus:

-------------------------------
javascript:location.reload();
-------------------------------

So sieht das im Editor aus, wenn Du einen Button der NavBar dazu "missbrauchst"

That's all

Viel Erfolg

Zuletzt geändert von BeRo am 28.09.2016, 12:52, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

saibotekcirf schrieb am 01.10.2016 um 20:02 Uhr

Guten Abend BeRo,

vielen Dank für deine Rückmeldung. Das Einblenden nach Videoende funktioniert einwandfrei.  ...doch wie das nun mit dem "Ausblenden" der PopUps bei Video-Neustart funktionieren soll, bin ich mir noch nicht so sicher.

Nochmal kurz mein Anliegen: Das Video wird abgespielt. Nach Videoende erscheinen die PopUps. Da ich die "Controls" des Videos frei geschaltet habe, hat der Besucher die Möglichkeit das Video somit neuzustarten. Die PopUps sollen dann natürlich wieder verschwinden.

Ich habe also nun einen Button erstellt und diesen Button verlinkt mit 

javascript:location.reload();

Wenn ich das jetzt richtig verstanden habe, wird die Seite doch dann nur neu geladen, wenn man auf diesen Button klickt und nicht, wenn man das Video über die VideoControls neu startet.  Gibt es hierfür also eine Lösung?

Lieben Gruß

Tobias

BeRo schrieb am 01.10.2016 um 20:44 Uhr

[...] Wenn ich das jetzt richtig verstanden habe, wird die Seite doch dann nur neu geladen, wenn man auf diesen Button klickt und nicht, wenn man das Video über die VideoControls neu startet. [...]

Das hast Du absolut richtig verstanden...

Du kannst leider nicht ohne tiefere Eingriffe in den Systemcode die Videosteuerung mit eigenen JScript Dateien verbinden. Ein Neustart des Videos über die Video Controls kann also keine Auswirkung auf die Popups haben.

Mein Vorschlag, das über einen separaten Button zu realisieren, umgeht das Dilemma. Das funktioniert aber nur, wenn Du die Video Controls unterbindest. Wird das Video mit der autoplay Option gestartet, beginnt es automatisch wenn die Seite geöffnet- oder neu geladen wird.
Genau das passiert, wenn Du die Funktion "location.reload()" mit einem Klick auf den Button aktivierst. Zusätzlich sorgt die reload Funktion  dafür, dass alle popup Ebenen geschlossen werden. Beschriftest Du den Button z. B. mit "Video wiederholen", sollte Dein Problem gelöst sein.

Viel Erfolg

Zuletzt geändert von BeRo am 01.10.2016, 20:44, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

saibotekcirf schrieb am 01.10.2016 um 21:05 Uhr

...danke für die schnelle Rückmeldung ;-)

...ich konnte mir schon denken, dass mein Vorhaben so ohne weiteres nicht so einfach zu realisieren ist. Da ich die Controls gerne beibehalten möchte, da ich dem Besucher die Möglichkeit geben möchte, das Video auch zu stoppen (falls jemand es sich nicht ansehen möchte), werde ich das über diesen Button realisieren und hoffen, dass keiner nach Videoende das Video über die Controls neu startet :-D

BeRo schrieb am 01.10.2016 um 21:20 Uhr

[...] hoffen, dass keiner nach Videoende das Video über die Controls neu startet [...]

Vielleicht kannst Du mit einem der Popups eine entsprechende Info einblenden, die darauf hinweist, dass das Video am besten mit dem Button '"Video Wiederholen" neu gestartet wird...

Zuletzt geändert von BeRo am 01.10.2016, 21:20, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓