Video beginnt auf 2. Ebene auch ohne Klick automatisch

muhgie schrieb am 23.03.2015 um 17:58 Uhr

Hallo, auf meiner Website sind Videos auf Ebene 2 abgelegt, Start automatisch.

Automatisch soll das Video aber erst starten, wenn der Link zu Ebene 2 angeklickt wurde.

In meinem Fall gibt es im Video nach knapp 40 sek. ein Brennergeräusch und jedesmal, wenn ich die Seite öffne ohne das Video aufzurufen, höre ich nach 40 sek. das Rauschen, das Video läuft also im Hintergrund los.

Wie kann man das unterbinden?

http://www.franke-ios.de/neu/index.htm / Leistungen / FIOSjet.

Über eine hilfreiche Antwort würde ich mich freuen.

Win 7 prof./ Xara Designer Pro X10

Kommentare

BeRo schrieb am 23.03.2015 um 23:49 Uhr

[...] Automatisch soll das Video aber erst starten, wenn der Link zu Ebene 2 angeklickt wurde [...]

Das ist nur möglich, wenn Du die Videos auf eine separate Seite auslagerst, die z. B. per iframe in einen Platzhalter auf der aktuellen Video Ebene eingebunden wird.

Jetzt sind die Videos Bestandteil der Seite "ger_fiosjet1.htm" und dort hast Du festgelegt, dass, abhängig vom Browser, eins der Videos direkt gestartet wird, wenn die Seite geöffnet wird:

Dass Du das Video trotzdem nicht sehen kannst, liegt daran, dass es auf einer popup Ebene liegt, die erst eingeblendet wird, wenn der Link "Video" geklickt wird.

Abhilfe:

Ändere das VIDEO Tag wie unten gezeigt ab:

Dann startet das Video erst nach einem Klick auf den "Start" Button im Video:

Die 100% Lösung wäre die oben erwähnte Alternative, das Video über eine separate HTML Seite einzubinden.

Viel Erfolg

Zuletzt geändert von BeRo am 23.03.2015, 23:49, 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... 🤓

muhgie schrieb am 24.03.2015 um 20:14 Uhr

Vielen Dank, das werde ich probieren. Eigentlich möchte ich das Video auf der 2. Ebene belassen, weil es da so schön hereingleiten kann.

Zuletzt geändert von muhgie am 24.03.2015, 20:14, insgesamt 1-mal geändert.

- Windows 10 Home, 64-Bit
- Intel(R) Core(TM) i7- 8700 CPU @ 3.20GHz 3.19GHz
- 16,00 GB Arbeitsspeicher
- Xara Designer Pro X16
- Magix Video Pro X

BeRo schrieb am 24.03.2015 um 20:20 Uhr

Auf den Effekt des Hereingleitens musst Du ja nicht verzichten, wenn Du anstelle des Videos einen Platzhalter für eine HTML Seite auf der Ebene ablegst...

Vorteil: Das Video startet dann nicht schon im Hintergrund sondern erst, wenn die Ebene eingeblendet wird.

Zuletzt geändert von BeRo am 24.03.2015, 20: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... 🤓

muhgie schrieb am 24.03.2015 um 23:06 Uhr

Geniale Idee, wäre ich nicht drauf gekommen. Muß jetzt noch das Wie durchdenken, denn das Video liegt in einem Ordner, wohin ich verlinkt habe,

(denn wenn ich das Video direkt in das Projekt ziehe, streamt es nicht, obwohl ich es in Magix VDL 2015 plus mit der Option Streaming speichere. Das ist aber ein anderes Thema. Bei mir klappt Streamen nur, wenn ich das Video dann mit dem 'Free HTML5 Video Player and Converter' convertiere, außerdem wird es durch dieses Programm noch einmal gut verkleinert, ohne an Format zu verlieren.).

Aber ich werde es mal versuchen. Genaugenommen muß die HTML ja nur zum Video verlinken und der Platzhalter auf Ebene2 verlinkt zu der HTML. Toll, Deine Hilfe.

Zuletzt geändert von muhgie am 24.03.2015, 23:06, insgesamt 1-mal geändert.

- Windows 10 Home, 64-Bit
- Intel(R) Core(TM) i7- 8700 CPU @ 3.20GHz 3.19GHz
- 16,00 GB Arbeitsspeicher
- Xara Designer Pro X16
- Magix Video Pro X

BeRo schrieb am 25.03.2015 um 23:01 Uhr

[...] wäre ich nicht drauf gekommen [...]

Und das ist gut so, denn es funktioniert nicht...

Der Grund ist identisch mit dem ursprünglichen Problem. Der Code im HTML Platzhalter der Video Ebene wird im Hintergrund ausgeführt, sobald die Seite geöffnet wird und damit wird auch der iframe geladen und das Video (unsichtbar) gestartet.

Da hilft nur noch ein Eingriff in den Ablauf der Aktivitäten, die der aufrufende Browser vornimmt.
2 Wege bieten sich dazu an:

  1. Kann der iframe Code über eine JavaScript Funktion generiert werden, die erst dann ausgeführt wird, wenn die Video Ebene eingeblendet wird.
    Oder
  2. Kann der komplette HTML5 Video Code in die Seite integriert werden, wenn die Video Ebene eingeblendet wird.

Die 2. Lösung hat den Vorteil, dass das JS dafür sorgt, dass der so eingebaute HTML5 Code wieder entfernt wird, wenn der Player geschlossen wird.
Den u. a. Code habe ich auf dieser Site gefunden.

Die damit gebaute Demo sieht so aus:

Zum Test habe ich folgenden HTML5 Video Code verwendet:

--------------------------
<video width="420" height="180"  autobuffer autoplay controls>
<source src="./index_htm_files/happyfit2.ogv" type="video/ogg"></source>
<source src="./index_htm_files/happyfit2.mp4" type="video/mp4"></source>
<div>Schade – hier käme ein Video, wenn Ihr Browser HTML5 Unterstützung hätte, wie z.B. der aktuelle Firefox</div>
</video>

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

Das o. a. HTML5 Video Tag kann komplett in den folgenden JS Code eingebaut werden, der dafür sorgt, dass der Video Code nur dann aktiv wird, wenn die Video Ebene eingeblendet wird.
Der damit komplettierte JS Code sieht so aus:

-------------------------
<script type='text/javascript'>
function video1() {
    var foo, targetElement = document.getElementById('vid1')
    foo = document.createElement('foo')
    foo.innerHTML = '<video width="420" height="180" autobuffer autoplay controls>'+
'<source src="./index_htm_files/happyfit2.ogv" type="video/ogg"></source>'+
'<source src="./index_htm_files/happyfit2.mp4" type="video/mp4"></source>'+
        '<div>Schade – hier käme ein Video, wenn Ihr Browser HTML5 Unterstützung hätte, wie z.B. der aktuelle Firefox</div>'+
        '</video>'
   
// Append 'foo' element to target element
    targetElement.appendChild(foo)

    // Add event
    foo.firstChild.onclick = function() { return !!alert(this.target) }

    while (foo.firstChild) {
       
// Also removes child nodes from 'foo'
        targetElement.insertBefore(foo.firstChild, foo)
    }
   
// Remove 'foo' element from target element
    targetElement.removeChild(foo)
}
</script>

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

Der komplette Code kann im HTML Head der Seite abgelegt werden´, die das Video zeigen soll.

Die im Code gelb markierten Werte sind vom Video abhängig. Sie müssen also angepasst werden.
Der orange markierte Eintrag ist besonders wichtig. Er steht für die ID des Videos, genauer gesagt für die ID des Video Platzhalters.
Der JS Code sorgt dafür, dass das HTML5 Video Tag zur Laufzeit  im HTML Body des DIV Bereichs (Platzhalter) mit dieser ID abgelegt wird.

Die ID kann dem Platzhalter auf 2 verschiedene Arten zugewiesen werden.

  1. Nach einem Rechtsklick auf den Platzhalter kannst Du ihm die ID "vid1" als Name zuweisen


     
  2. Alternativ trägst Du im HTML Body des Platzhalters die folgende HTML Zeile ein:
    <div id="vid1"></div>

Um das Video zu starten, müssen 2 JS Funktionen gestartet werden.

  1. Muss die popup Ebene geöffnet werden, mit der Funktion "xr_cpu(4)"
  2. Muss das HTML5 Video Tag eingebaut- und gestartet werden, mit der Funktion "video1()"


     

So sieht der Aufruf beider Funktionen aus, wenn Du das als Link einträgst, wie oben gezeigt:

--------------------------
javascript:xr_cpu(4); video1();
-------------------------

Da die Video Ebene den Status (lock) bekommen hat, kann sie nur durch Starten einer besonderen JS Funktion geschlossen werden oder durch reload der aktuellen Seite.
Die reload Option ist hier  die bessere Variante, weil ein einfaches Schließen der Video Ebene das Video im Hintergrund weiter laufen lässt.

Der Link für das transparente Rechteck auf der Textzeile "Video schließen'" sieht dann so aus:

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

Jetzt musst Du nur noch dafür sorgen, dass die Video Ebene von der JS Funktion "xr_cpu(4)" auch gefunden wird. Solange kein direkter Link auf die Ebene gelegt wird, vergibt der WD keine Index Werte. Gib also einem möglichst unsichtbaren Objekt den Link auf die popup Ebene "PU-Video (lock)" und gut ist...
Im o. a. Beispiel habe ich dafür das weiße Rechteck benutzt, das im ersten Screenshot die Nr. 4 bekommen hat.

Wenn Du möchtest, kannst Du Dir hier die komplette Projektdatei herunterladen, inkl. der eingebauten JS Codes und inkl. der Hilfsdatei mit den Videos und dem Dummy für die Video Vorschau.

Viel Erfolg beim Nachbau

----------------------------------
Edit 27.3.  14:50h

Zum Download angebotene Projektdatei angepasst auf die "schlanke" Version aus diesem Kommentar.

Zuletzt geändert von BeRo am 27.03.2015, 14:50, insgesamt 3-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... 🤓

BeRo schrieb am 27.03.2015 um 14:46 Uhr

Vergiss (fast) alles, was ich bisher als Lösung gepostet habe. Es geht sehr viel einfacher!

Es hat mich doch ein bisschen gefuchst, dass es scheinbar keine einfache, scriptfähige Möglichkeit geben soll, den einmal gestarteten HTML5 Player komplett zu stoppen, nachdem er gestartet wurde.
Und, Überraschung, es gibt sie...

Wenn Du das umsetzen möchtest, kannst Du Deine Seite "ger_fiosjet1.htm" bis auf zwei kleine Änderungen so lassen, wie sie ist.
Damit die weiter unten beschriebenen Codeschnipsel funktionieren, musst Du nur einen Dummylink auf die popup Ebene für das Video anlegen, dem HTML5 Video Tag eine ID verpassen und 3 JS Codeschnipsel einfügen. Für die u. a. Demo habe ich als ID "myvideo" gewählt, die eingebaut  so aussieht:

------------------------
<video width="420" height="180"  autobuffer autoplay controls id="myvideo" onended="xr_ppc('xr_xp4')">
[...]
-----------------------

In den folgenden Screenshots ist die ID gelb markiert.

Das in der o. a. Codezeile grün markierte Ereignis "onended", startet bei Ende des Videos die orange markierte Funktion "xr_ppc('xr_xp4')", zum Ausblenden der Player popup Ebene.
Damit wird automatisch wieder das Video Startbild- und der Startlink angezeigt (Demo).

Der HTML Body des Video Platzhalters muss jetzt noch den Aufruf der PAUSE Funktion bekommen, der dafür sorgt, dass das beim Öffnen der Seite gestartete Video sofort gestoppt wird.

Im u. a. Screenshot ist der Eintrag grün markiert.

 

In den HTML Head des Video Platzhalters kopierst Du noch die folgenden 2 JavaScript Funktionen.
Beim Aufruf der ersten ("pause()") wird der Video Player angehalten.
Die zweite ("run()") startet den Player wieder und sorgt dafür, dass die Wiedergabe bei Sekunde 0 beginnt (currentTime = 0):

---------------------
<script type="text/javascript">
function pause() {
var vdPlayer = document.getElementById('myvideo');
vdPlayer.pause();
}
</script>

<script type="text/javascript">
function run() {
var vdPlayer = document.getElementById('myvideo');
vdPlayer.currentTime = 0;
vdPlayer.play();
}
</script>

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

Wie Du das Video auf Deiner Seite starten/stoppen willst, kannst Du frei entscheiden. Du musst nur dafür sorgen, dass die entsprechenden Link Objekte (Button-, Grafik-, Text-, etc.) einen Aufruf für die passende JavaScript Funktion bekommen, der so aussehen kann:


Für das Einblenden der Video Ebene und Start des Videos:
----------------------------------
javascript: xr_cpu(4); run();
----------------------------------

Für das Ausblenden der Video Ebene und Pausieren des Videos:
----------------------------------
javascript: xr_ppc('xr_xp4'); pause();
----------------------------------

Und das war's dann auch schon.

Viel Erfolg

-----------------------------
BTW

Die im letzten Posting zum Download angebotene Projektdatei habe ich entsprechend angepasst, sie ist also auf dem aktuellsten Stand...

 

Zuletzt geändert von BeRo am 07.04.2015, 17:42, insgesamt 4-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... 🤓

muhgie schrieb am 27.03.2015 um 23:49 Uhr

Erst einmal ganz großen Dank für die viele Mühe, einfach toll! Momentan habe ich wenig Zeit. Ich werde es durchdenken, probieren und dann berichten. Bin schon sehr gespannt.

Zuletzt geändert von muhgie am 27.03.2015, 23:49, insgesamt 1-mal geändert.

- Windows 10 Home, 64-Bit
- Intel(R) Core(TM) i7- 8700 CPU @ 3.20GHz 3.19GHz
- 16,00 GB Arbeitsspeicher
- Xara Designer Pro X16
- Magix Video Pro X