IE: Layer mit embedded Video geschlossen, Sound läuft weiter

[berniee]

Hallo!

Ich habe folgendes Problem.

Ich habe einen versteckten Layer (display:none), in welchen ein Vimeo-Video eingebettet.

Nach einem Klick auf einen Link wird der Layer angezeigt (display: block) und das Video wird gestartet. Funktioniert ohne Probleme.

Schliesse ich diesen Layer dann (display:none), so verschwindet der Layer zwar, das Video sieht man nicht mehr, aber der Sound des Videos läuft im Hintergrund weiter.

Bei Firefox und Opera hab ich keinerlei Problem.

Was läuft da beim IE verkehrt bzw. wie kann ich das Problem beseitigen?

Vielen Dank,
Bernd

[ChrisB]

Hi,

Schliesse ich diesen Layer dann (display:none), so verschwindet der Layer zwar, das Video sieht man nicht mehr, aber der Sound des Videos läuft im Hintergrund weiter.

Was läuft da beim IE verkehrt

Kommt auf den Standpunkt an.

bzw. wie kann ich das Problem beseitigen?

Nicht ausblenden, sondern aus dem DOM entfernen.
Oder per JavaScript den Stop-/Pause-Button des Videoobjektes betätigen, wenn für den Zugriff eine entsprechende API existiert.

MfG ChrisB

[Der Martin]

Hi,

Nach einem Klick auf einen Link wird der Layer angezeigt (display: block) und das Video wird gestartet. Funktioniert ohne Probleme.
Schliesse ich diesen Layer dann (display:none), so verschwindet der Layer zwar, das Video sieht man nicht mehr, aber der Sound des Videos läuft im Hintergrund weiter.

Was läuft da beim IE verkehrt bzw. wie kann ich das Problem beseitigen?

zum Vergleich: Du machst Licht im Zimmer, und stellst das Radio an. Nach einer Weile machst du das Licht aus, und wunderst dich, dass das Radio immer noch spielt.

Du solltest also den einmal gestarteten Video-Player auch wieder stoppen.

Den in eine Webseite eingebetteten Player stört es in der Regel nicht, ob er tatsächlich sichtbar ist. Ich halte eher das von dir beschriebene Verhalten von Opera und Firefox für fragwürdig, die anscheinend den Player eliminieren, wenn er nicht mehr sichtbar ist.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

zum Vergleich: Du machst Licht im Zimmer, und stellst das Radio an. Nach einer Weile machst du das Licht aus, und wunderst dich, dass das Radio immer noch spielt.

Kann mir nicht passieren. Ich mache das Licht am Sicherungskasten aus. Sicher ist sicher.

(Und nein, ich brauche kein Streichholz um nachzuschauen, ob das Licht wirklich aus ist.)

Den in eine Webseite eingebetteten Player stört es in der Regel nicht, ob er tatsächlich sichtbar ist. Ich halte eher das von dir beschriebene Verhalten von Opera und Firefox für fragwürdig, die anscheinend den Player eliminieren, wenn er nicht mehr sichtbar ist.

“Still at the end of every hard earned day people find some reason to believe” – even in their favorite browser.

Die 'display'-Eigenschaft steht in der Spec zwar im _Visual_ formatting model [CSS21 §9], ist aber wohl doch nicht ausschließlich auf visuelle Ausgabe beschränkt:

“'speak' […] none
    Suppresses aural rendering so that the element requires no time to render. Note, however, that descendants may override this value and will be spoken. (To be sure to suppress rendering of an element and its descendants, use the 'display' property).” [CSS21 §A.4]

Qapla'

[Der Martin]

Hi Gunnar,

zum Vergleich: Du machst Licht im Zimmer, und stellst das Radio an. Nach einer Weile machst du das Licht aus, und wunderst dich, dass das Radio immer noch spielt.
Kann mir nicht passieren. Ich mache das Licht am Sicherungskasten aus. Sicher ist sicher.
(Und nein, ich brauche kein Streichholz um nachzuschauen, ob das Licht wirklich aus ist.)

du bist ja auch kein Ostfriese[1]. ;-)

Die 'display'-Eigenschaft steht in der Spec zwar im _Visual_ formatting model [CSS21 §9], ist aber wohl doch nicht ausschließlich auf visuelle Ausgabe beschränkt:

So scheinen Firefox und Opera zu ticken.

“'speak' […] none
    Suppresses aural rendering so that the element requires no time to render. Note, however, that descendants may override this value and will be spoken. (To be sure to suppress rendering of an element and its descendants, use the 'display' property).” [CSS21 §A.4]

Das ist weit hergeholt, finde ich. Erstens haben eingebettete Multimedia-Inhalte IMO nicht unbedingt etwas mit "whether text will be rendered aurally" zu tun, so dass die speak-Eigenschaft hier nicht anwendbar ist; aber selbst wenn man das so sehen möchte, sehe ich in der Spec keinen Hinweis darauf, dass die Eigenschaft speak in irgendeiner Weise mit display korreliert oder abhängig ist (obwohl es logisch wäre, dass nicht angezeigter Text auch nicht vorgelesen werden soll).
Insofern halte ich das Verhalten der beiden genannten Browser zwar für plausibel, aber nicht für korrekt.

So long,
 Martin

[1] je nachdem, welche Bevölkerungsgruppe gerade dran ist, kann "Ostfriese" auch gegen "Österreicher", "Blondine", "Schildbürger", etc. ausgetauscht werden.

[berniee]

Ah ok, schöner Vergleich.

Aber wie hänge ich ein ganzes Element in den DOM ein?

Ich kann mir noch vorstellen, wie ich etwas einzeiliges, wie ein "<br>" oder ein "<img src....>" einhänge.

Aber mehrere Zeilen, wie bei einem embedded Video?

Danke,
Bernd

[ChrisB]

Hi,

Aber wie hänge ich ein ganzes Element in den DOM ein?

Ich kann mir noch vorstellen, wie ich etwas einzeiliges, wie ein "<br>" oder ein "<img src....>" einhänge.

Aber mehrere Zeilen, wie bei einem embedded Video?

Auch das ist nur ein Element - das ggf. Kindelemente hat.

MfG ChrisB

[berniee]

Auch das ist nur ein Element - das ggf. Kindelemente hat.

Hm...

Ich würde einen Platzhalter "videoplatzhalter" schaffen.

Dann habe ich noch ein <div id="video">  welches irgendwo im HTML-Quelltext wie folgt angegeben ist.

  
   <div id="video">  
      <object width="640" height="360">  
      <param name="allowfullscreen" value="true" />  
      <param name="allowscriptaccess" value="always" />  
      <param name="movie" value="http://vimeo.com/moogaloop.swf?..." />  
      <embed src="http://vimeo.com/moogaloop.swf?...></embed>  
      </object>  
   </div>  

Bisher habe ich einzeilige HTML-Elemente so eingehängt:

  
document.getElementById("inputfelder").innerHTML = '<input name="pics[]" type=file>';  

Wie ich jetzt aber das gesamte DIV "video" in das DIV "videoplatzhalter" einhängen könnte, da habe ich keine Idee.

Hat jmd. ein Tipp für mich? Oder einen Link, was ich mir mal anschauen sollte?

Danke,
Bernd

[Gunnar Bittersmann]

@@berniee:

nuqneH

Bisher habe ich einzeilige HTML-Elemente so eingehängt: […]
Wie ich jetzt aber das gesamte DIV "video" in das DIV "videoplatzhalter" einhängen könnte, da habe ich keine Idee.
Hat jmd. ein Tipp für mich?

Mehrere.

Es gibt keinen Grund, Zeilenumbrüche zu setzen (außer der Übersichtlichkeit des Codes). Du könntest also schreiben:

document.getElementById("videoplatzhalter").innerHTML = '<div id="video"><object width="640" height="360"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?..." /><embed src="http://vimeo.com/moogaloop.swf?...></embed></object></div>';

Aber Zeilenumbrüche in Strings lassen sich in JavaScript auch http://de.selfhtml.org/javascript/sprache/notationen.htm@title=escapen:

document.getElementById("videoplatzhalter").innerHTML = '<div id="video">\  
  <object width="640" height="360">\  
    <param name="allowfullscreen" value="true" />\  
    <param name="allowscriptaccess" value="always" />\  
    <param name="movie" value="http://vimeo.com/moogaloop.swf?..." />\  
    <embed src="http://vimeo.com/moogaloop.swf?...></embed>\  
  </object>\  
</div>';

Wozu soll eigentlich der Container div[@id="video"] gut sein? Sieht ziemlich überflüssig aus.

Und 'embed' gibt es in keiner HTML-Version < 5 und in keiner XHTML-Version. Es ist auch nicht erforderlich: Flash Satay.

Oder einen Link, was ich mir mal anschauen sollte?

Ja, die DOM-Methoden http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=createElement() und http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild().

Qapla'

[berniee]

DANKE!!!!!!

Das <embed> kommt direkt von Vimeo. Hab ich da einfach nur rauskopiert aus deren Vorgabe ...

Das video-DIV ist dafür da, um dem Video, welches in einem Layer über die Webseite gelegt wird, CSS-Infos mitzugeben.

Die Links schau ich mir an.

Viele Grüße,
bernd

[Gunnar Bittersmann]

@@berniee:

nuqneH

Das <embed> kommt direkt von Vimeo. Hab ich da einfach nur rauskopiert aus deren Vorgabe ...

Jaja, millionenfach im Web, millionfach falsch.

Das video-DIV ist dafür da, um dem Video, welches in einem Layer über die Webseite gelegt wird, CSS-Infos mitzugeben.

Dafür hast du doch schon das div[id="videoplatzhalter"].

Qapla'