HTML Flash und HTML5 gmeinsam für jeden Browser

cumulonimbus8 · 14. Juli 2015

Hallo!

Aus dem Zwang der Abwärtskompatibilität heraus hätte ich gern eine einzelne Page so programmiert, dass je nach Fähigkeiten des Browsers mal ein Flash-SWF und (›stattdessen‹) mal eine HTML5-MP4 an optisch selber Stelle abgespielt wird.

Ist das zu machen?

Theoretisch sollte in HTML5-unfähiger Browser einen im zugehörigen Codeblock abgelegten ›normalen‹ Code (hier also Flash) abspielen. Ist mir nicht gelungen.
Andersrum sollte so ein normaler Block, wie man von Frames kennt, übergangen werden… Das Video kam natürlich doppelt.

CN8

PS: gibt es einen bequemen Kniff solche unterschiedlichen Browser zu erkennen?

Hellblazer · 14. Juli 2015

Per Javascript abfragen, ob der Browser HTML5 kann und entsprechend handeln, ist keine Option?
(wobei das nicht mehr "bequem" ist. Mit Modernizr lässt sich das allerdings noch halbwegs bequem erreichen. Dann wird aber entsprechend eine Bibliothek eingebunden...)

Hancock · 14. Juli 2015

Hmm:

Code:

<video>
<source src="....pm4">
<object ...>No &lt;video&gt; and no Flash</object>
</video>

funktioniert nicht? In diesem Fall wird das Video via HTML5 abgespielt, falls es der Browser packt, sonst via Flash.
Umgekehrt müsste es auch funktionieren.

Lawnmower · 14. Juli 2015

Einfach das OpenSource video.js nehmen, das erledigt den Switch zwischen Flash und HTML5 automatisch und die Einbindung ist simpel.
Wobei alles ab IE9 und grösser kann der video Tag bereits nutzen, Flash als Videoplayer ist also so gut wie unnötig, siehe auch http://www.w3schools.com/html/html5_video.asp

cumulonimbus8 · 14. Juli 2015

Das mit <object>…</object> ist mir irgendwie neu, da erinnere ich mich nicht dran das so in Beispielen gelesen und damit getestet zu haben.
Muss ich unbedingt mal prüfen.

Video.JS werde ich mal durchschauen, aber letztlich suche ich einen stillen Player und nichts was so wild aussieht wie sich die Homepage präsentiert…

CN8

Lawnmower · 14. Juli 2015

Du kannst den beliebig per CSS anpassen, ist auch nicht weiter kompliziert.
Aber würde an deiner Stelle erstmal in den Logs gucken wieviele IE's < 9 überhaupt noch zu Besuch kommen.

cumulonimbus8 · 14. Juli 2015

Einer reicht. So ist das im Business.
(Wenigsten verbrenne ich mir nicht das Maul klar zu sagen: wir pfeifen jetzt auf IE<10, alle normalen Browser haben das intus. Denn der Konter wird XP heißen…)

Jedenfalls habe ich immer noch nicht den Code gefunden mit dem ich selbst experimentiert habe - das wurmt mich ordentlich. Grummel…
Ich suche weiter; das mit dem Fehlenden Tag in allen Beispielen kann doch nicht Warstein!

CN8

Tja… Theoretisch funktioniert das, mit dem <Object>…</Object> (hatte ich wirklich nicht dabei, was einiges erklärt). Aber praktisch treten mir SeaMonkey und FireFox vors Schienbein!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=windows-1250">
<TITLE></TITLE>
</HEAD>

<BODY>
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
 <TR align="center">
  <TD align="center">

   <VIDEO width="512" height="286" autoplay>
    <SOURCE src="./mediadatei.mp4" type="Video/mp4">
    <SOURCE src="./mediadatei.ogg" type="Video/ogg">
    <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
     width="512"
     height="286"
     id="player"
     align="middle">
     <PARAM name="movie" value="./mediadatei.swf">
     <PARAM name="loop" value="false">
     <PARAM name="menu" value="true">
     <PARAM name="quality" value="best">
     <PARAM name="bgcolor" value="#FFFFFF">
     <!-- Dieser EMBED-Block ist für Netscape & Co nötig.
          Nicht W3C-konform; andere Browser ignorieren innert OBJECT dieses Hilfsmittel. -->
     <EMBED
      src="./mediadatei.swf"
      width="512"
      height="286"
      loop="false"
      quality="best"
      pluginspage="http://www.macromedia.com/go/getflashplayer"
      type="application/x-shockwave-flash">
     </EMBED>
    </OBJECT>
   </VIDEO>

  </TD>
 </TR>
</TABLE>

</BODY>
</HTML>

Dieser Code mit den 3 Media-Files liegt auf dem Server, allein weil ja Mozillas es nicht für opportun halten Mediadateien aller couleur über lokale Pfadstrukturen zu akzeptieren..:
SeaMonkey (aktuell) - geht nicht. FireFox (aktuell) geht nicht.
Chrome - geht. IE11 - geht. IE8 - geht. Opera 12.16 - geht nicht?!?? Opera 30.0 - geht.

{zensiert}
Was nutzt mir der scheinbar optimale Code wenn er nicht überall läuft? Den Mozillas zuliebe habe ich es eben noch mit »"http://www.meinserver.de/test/mediadatei"« (statt "mediadatei" oder "./mediadatei"; beides ging) versucht - unsere drei Streikenden ficht das nicht an.

Wie ist dieses Dilemma zu lösen?

Hancock · 14. Juli 2015

Hmm, du solltest alles über die selbe Domain/selben Domaintyp ausliefern. Also HTML und Files über ein Webserver. Problem sind da Same-Origin-Policies.

Ich mach gerne die Pfad mit /subsite/media/file.mp4, (also in PHP wär's so was wie SITE_ROOT.'media/file.mp4'), da dadurch die Seite verschoben werden kann und ich mir keine Gedanken drum machen muss, wenn jetzt die URL von der ich drauf zugreif, anders ist (mod_rewrite, SEO und co.).

Embed hab ich vollkommen vergessen. Das gibt's auch noch, ist aber glaub seit 15 Jahren deprecated.

Warums nicht geht: Sagt Firefox irgendwas in der Debug-Konsole?

(BTW: Table: *schauder*)

cumulonimbus8 · 15. Juli 2015

Tabelle diente dem Augenwohl das mal in die Mitte zu kriegen; zack-zack, sonst nix.

«Das angegebene "type"-Attribut "Video/mp4" wird nicht unterstützt. Das Laden der Medienressource [...] App.mp4 ist fehlgeschlagen.
Das angegebene "type"-Attribut "Video/ogg" wird nicht unterstützt. Das Laden der Medienressource [...] App.ogg ist fehlgeschlagen.»
Aha..?!??
Und warum finden andere das völlig I.O. ?

Code:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Das liefert W3Schools auf Frage nach einem Beispiel. Dort fehlt (übrigens) das besagte Object-Tag, daher wäre ich auch nie drauf gekommen.

Man muss offensichtlich um Gott Mozilla zu gefallen das «type="video/mp4"» klein schreiben! Dann geht es. Nun glaube keiner, dass ich «type="Video/mp4"» so getippt hätte, das stammt per Cpoy-Paste aus dem Web.

Opera 12 hustet mir immer noch was…
Da gibts auch so einen Debugmodus… Klicke ich auf das Video-Element im angezeigten Code wird es tatsächlich abgespielt (offenbar unter Zuhilfenahme von VLC). Aber im besagten angezeigten Code sehe ich was ›Komisches‹:
video width="512" height="286" autoplay=""
Im Quellcode steht da aber nur «autoplay», ohne «=""».
Aber auch mit einem autoplay="true" verweigert sich Opera.

Was kann man denn nun dafür wieder machen?

CN8

IKäsebrot · 15. Juli 2015

Ich empfehle darauf zu verzichten W3Schools in irgendeiner Weise zu zitieren. Siehe hier.

cumulonimbus8 · 15. Juli 2015

Nun ja; Google spült es nach vorne und grundsätzlich Murks habe ich da auch noch nicht erwischt. Eher das was mich überall stört: keine komplette Syntax mit allen Optionen (die man sich von mir aus anderweitig erklären muss) - was man nicht findet danach kann man nicht fragen…

CN8

MoOderSo · 15. Juli 2015

cumulonimbus8 schrieb:
Im Quellcode steht da aber nur «autoplay», ohne «=""».
Aber auch mit einem autoplay="true" verweigert sich Opera.

HTML-Attribute sind Key-Value-Paare.
Bei Boolean-Attributen kann man den Value-Teil weglassen.
"true" ist übrigens nicht zielführend, stattdessen muss man den Attributnamen verwenden.
Dh:
autoplay
autoplay=""
autoplay="autoplay"
sind äquivalent.
Siehe http://www.w3.org/TR/html-markup/video.html

cumulonimbus8 · 15. Juli 2015

Nicht «true»? Na schön; demnach sollte also ein autoplay auch mit dem vom Browser selbst generierten «=""» laufen. Autoplayt aber blöderweise nicht. Woran liegts?
CN8

MoOderSo · 15. Juli 2015

Wahrscheinlich daran, dass du versuchst alle Nostalgiestücke unter den Browser zu unterstützen.

Hier gibts ne Testseite für Videowiedergabe in unterschiedlichen Browsern:
http://camendesign.com/code/video_for_everybody/test.html
Da kannste ja mal schauen, ob und wie es im Opera 12 funktioniert.

cumulonimbus8 · 16. Juli 2015

»von Wollen kann keine Rede sein«

„Hier haste, mach mal.“

Aber der Link könnte die nötige Info enthalten; dass es am Dateityp hängt den ich nicht bei der Hand habe (das teste ich gleich) - danke dafür!
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />

Ich hab weder WEBM noch OGV vorliegen.
Kurz durchgejagt (AnyVideoConverter; ›Größe = Original‹) und beide Formate rauf auf den Server, noch das «autoplay» in «autoplay="autoplay"» geändert und Opera 12 spielt wenigstens was ab, aber verzerrt (zu hoch), trotz Angaben in der Syntax.

(Zwischenfrage: empfiehlt es sich den Typ OGV dem Typ OGG vorziehen, wenigstens was Videos betrifft?)

Und schon stehe ich umgehend wieder wie die Maus vor der Schlange. Mit was konvertiere ich denn meine MP4 oder AVI zu OGV oder WEBM? Iirgndwas muss ja auch die Quelle fürs Flash sein; und - juchee - aus CS5 heraus bekomme ich nur AVI ordentlich exportiert, nicht mal die SWFs funktionieren durchgängig!!
Knackpunkt ist nicht nur die Qualität per se, sondern auch das Seitenverhältnis. Und da bekomme ich Dinge auf den Tisch… Sollte es zufällig ein Tool geben, dem ich sagen kann: hie haste eine AVI, mach mal in einem Rutsch MP4, OV, WEBM draus (und zwar in selber Auflösung wie Seitenverhältnis)?
→ Ich hab nun peinlich drauf geachtet, dass die Verhältnisse (ich mein'; das Verhältnis…) stimmen, VLC zeigt das WEBM korrekt an. Nur Opera 12 macht aus 512x286 stur 380x286. Wie kriegt man nun das wieder auf die Reihe?

CN8

Hancock · 16. Juli 2015

ffmpeg würde ich nutzen. Leider ist das nicht verlustfrei (prinzipbedingt).
Befehlszeile wäre so was wie

Code:

ffmpeg -i video.avi video.ogv
ffmpeg -i video.avi video.webm

cumulonimbus8 · 16. Juli 2015

Nope - verlustfrei muss es schon sein sonst erleidet mein Wohlbefinden Verluste

CN8

Hancock · 16. Juli 2015

Verlustfrei geht schon, aber dann erschlägst du das mit Bandbreite. Es geht halt nicht mit einem simplen remuxen.

Was funktioniert: h264,AAC AVI -> h264 MP4. ffmpeg -i Video.avi -vcodec copy -acodec copy Video.mp4 (verlustfrei)
Die anderen Formate sind ja explizit nicht h264/AAC, daher musst du transcodieren, das geht zwar auch pixelgenau, aber dann hast du eine wirklich schlechte Kompression (mindestens 3 mal größer).

MoOderSo · 16. Juli 2015

Wenn es keine obergeheimen Videos sind, kann man das Problem auch einfach zu Youtube outsourcen und einfach deren Player einbinden.
Machen wir so.

cumulonimbus8 · 16. Juli 2015

Nur als Zwischenmeldung: jetzt spielt auch Opera 12 das richtig ab - nur habe ich nichts verändert???
(Nein. Die Tafel Schokolade zählt nicht! Petze!)

Bliebe in der Tat der Wunsch nach dem 1-Schritt-Konverter.

CN8

HTML Flash und HTML5 gmeinsam für jeden Browser

Fleet Admiral

Lt. Commander

Captain

Maître de cuisine Pro

Fleet Admiral

Maître de cuisine Pro

Fleet Admiral

Captain

Fleet Admiral

Ensign

Fleet Admiral

MoOderSo

Gast

Fleet Admiral

MoOderSo

Gast

Fleet Admiral

Captain

Fleet Admiral

Captain

MoOderSo

Gast

Fleet Admiral

Ähnliche Themen