Videowiedergabe / Codewahl für Browser via JavaScript / HTML5

Question

Hallo!

In einfachen Worten formuliert haben wir das Problem Videos (Spots bis so 30 Sekunden) auf der Website abspielen zu müssen. SWF war da bisher der größte gemeinsame Nenner (auch aus anderen Erwägungen heraus).
Leider kommen uns Endgeräte quer die kein Flash können… Also dachte sich der brave Programmierer das so: Man fragt über (schon gefundenen) JS-Code mögliche Browser ab (innerhalb Body; im Head steht der Code der das ermittelt) und geht das Resultat mit Switch-Case durch. So müsste eigentlich einfach nur mit Dingen wie Document.WriteLn der jeweilige Codeblock geschrieben werden…
(Jeweilig - für HTML4 und HTML5 was das <Video>-Tag kann. Letzteres kann zwar eine Meldung ausgeben, aber nicht innerhalb den 4er Video-Play-Code ausführen, was auch nicht genial erfunden ist…)

Anmerkung: der Code wird dynamisch durch ein Tool gejagt; er ist (A) keine fixe, komplette WebSite und (B) wird der Quellcode über eine selbstgestrickte Anwendung in Form gebracht denn er kommt aus der Vorstufe des eben erwähnten Tools. Wir haben immer nur eine einzige HTML-Datei zur Verfügung! «Operation am offenen Herzen» trifft es nicht ganz, geht aber in die Richtung.

Wie auch immer, mein Plan klappt leider nicht. Habe ich da schon einen strukturellen Denkfehler drin und müsste das anders aufziehen oder wäre nur ein Syntaxfehler als Ursache anzunehmen?

Eric March

Answer 1

dann alles gut da problematik erstaunlicherweise vollständig bedient

Answer 2

Hi,

ich habe zwar keine Erfahrung mit HTML5, aber:

Ich empfehle, dass Du Dich zunächst aussschließlich um die HTML variante kümmerst, und eine Javascript variante völlig außen vor lässt.

Mit anderen Worten, kläre die Frage:
"wie kann man ein Video einfügen, so dass in HTML5 nur ein HTML5 video angezeigt wird, und bei nicht-unterstützung von HTML5 nur ein flash video angezeigt wird?".
(zu dem Thema gibts im Internet einiges zu finden, wies aussieht. Aber daher hast Du ja Deinen Code, wenn ich das richtig verstanden habe.)


Möglicherweise ist die Antwort darauf: "das geht nicht".
Wenn das der Fall sein sollte, ist klar, wie die videos eingebunden wären.
Kläre erst dann aussschließlich, wie man die Alternativen mit Javascript auswählen kann.

Ich finde diesen Thread nämlich ziemlich verwirrend: einerseits heisst es immer, das Javascript sei nicht das Kernproblem, andererseits ist die Rede von 'code einfügen'.
Wenn es nur um das eine oder nur um das andere ginge, hätte ich vielleicht schon früher mal Lust gehabt, mich damit zu beschäftigen.

Viel erfolg.

Answer 3

Hallo!

Wenn HTML(5) so einfach und direkt wäre wie es dasteht würde ich 3 Kreuze machen.

Mit anderen Worten, kläre die Frage:
"wie kann man ein Video einfügen, so dass in HTML5 nur ein HTML5 video angezeigt wird, und bei nicht-unterstützung von HTML5 nur ein flash video angezeigt wird?".
(zu dem Thema gibts im Internet einiges zu finden, wies aussieht. Aber daher hast Du ja Deinen Code, wenn ich das richtig verstanden habe.)
Eigentlich nicht. Ich habe vor Längerem nur mal nach dem Video-Tag gesucht wie das in HTML5 überhaupt aussehen soll. Die Syntax die ich fand schien kurz, knapp und eindeutig: »wenn das oben nicht klappt wirf diesen normalen HTML-Code aus« wobei der im Prinzip wohl nur eine ›Sorry, HTML5 geht nicht‹-Meldung sein sollte. Nirgendwo stand, dass man diesen Codeteil nicht ausnützen dürfte…

<video width=512 height=288 autoplay="autoplay">
<source src="/a/media/SPA.mp4" type="video/mp4" />
<source src="/a/media/SPA.ogg" type="video/ogg" />
Sorry, HTML5 geht nicht
</video>

Mehr als 5 Zeilen wie diese waren das nicht was ich fand.

Wenn du einen Idee hättest wo die von dir hervorragend formulierte Frage eine Antwort fände wäre das nicht schlecht; ich bin wirklich zu blöd zum Suchen.


Möglicherweise ist die Antwort darauf: "das geht nicht".
Das wäre sicherlich blöd, aber ich habe so langsam das Gefühl, dass das der Fall ist.


Ich finde diesen Thread nämlich ziemlich verwirrend: einerseits heisst es immer, das Javascript sei nicht das Kernproblem, andererseits ist die Rede von 'code einfügen'.
Wenn es nur um das eine oder nur um das andere ginge, hätte ich vielleicht schon früher mal Lust gehabt, mich damit zu beschäftigen.
Hmtja; mir wäre es schon lieber wenn das Video-Tag allein genügte. Deswegen wollte ich das JS-Thema zurückstellen da ich da weniger mit der Videowiedergabe selbst kämpfe sondern generell damit wie ich (was wenigstens der JS-Gedanke war) in so einer Selection-Struktur Code ›einfügen‹ oder nach einfacher Interpretation ›generieren‹ könnte.

Insofern würde ich gerne die primitive Lösung mit dem Video-Tag allein mal zu Ende arbeiten und JS vorläufig zurückstellen (da es ungleich aufwändiger wäre).

Eric March

Answer 4

Wenn du einen Idee hättest wo die von dir hervorragend formulierte Frage eine Antwort fände...

Suchwörter:
"video html5 html4"

Ergebnisse:
www.asdala.de/netz/html/video.html
camendesign.com/code/video_for_everybody
...

Zufällig zum Thema JS gefunden:
stackoverflow.com/questions/5800822/embeding-a-video-in-html4-vs-html5

VideoJS is an HTML5 Video Player, built with Javascript and CSS, with a fallback to a Flash video player for when the browser doesn't support HTML5 video

Answer 5

MediaElement.js bietet eine ähnliche Funktionalität.

Answer 6

…man kommt zu nix heute…

Der erste Link von kicia macht doch nichts anderes als mein Beispielcode, oder bin ich blind (was nach der Hektik bisher auch kein Wunder wäre). Auf die Conditional-Dingser für den IE verzichte ich, QuicktTime spielt keine Rolle.
Könnte das mal jemand gegenprüfen?

Auch der 2. Link sieht dem Grundschema des ersten verdächtig ähnlich. So einfach wie in beiden dargestellt hatte ich mir ja anfangs vorgestellt. Ich muss das mal in Ruhe testen.

Der Link von Supermax scheint zu erfordern zusätzliche JS-Elemente einbinden zu müssen; das ist etwas das ich nach Kräften vermeiden will. Die Tools mit denen ich Umgang habe sind irgendwie sehr eigen. Je mehr der Browser selbst tut desto besser.

Eric March

Answer 7

Wahnsinn in Dosen…

Ich habe nun den Code in meinem ersten Beispiel auf absolute lokale Pfade geändert (warum manche Browser mit relativen nicht können ist mir nicht ersichtlich).

Der IE8 zeigt brav nur das SWF-Video an.
Chrome zeigt OGG und SWF an.
Safari zeigt auch beide an, MP4 und SWF.
FireFox zeigt auch beide an (das Derivat SeaMonkey dito).
Opera spielt nur das SWF ab, hält aber eine leere Fläche vor wo das OGG abzuspielen wäre (da klemmt scheints was).

Tja, der Code ist offenbar nicht so ganz falsch aber die Browser spielen mir kollektiv einen Streich.
Was tun?

Eric March

Answer 8

Wie sieht denn nun der relevante HTML-Code bei dir aus?

Das <object>-Tag für den Flash-Videoplayer muß m.M. nach innerhalb des <video>-Tags notiert werden (Browser die kein <video> kennen sollten dieses Tag ignorieren und das <object> rendern), wie auf der Seite Video for everybody beschrieben.

Answer 9

Das ist (ohne Head und Body) der zz. im Versuch befindliche Code für lokale Tests

&laquo;SmartPhone App&raquo; abspielen
<br><br>
<video width=512 height=288 autoplay="autoplay">
<source src="file:///C:/a/media/SmartPhone App.mp4" type="video/mp4" />
<source src="file:///C:/a/media/SmartPhone App.ogg" type="video/ogg" />
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#c0bec2">
<div align="center">
<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="288"
id="player"
align="middle">
<param name="movie" value="file:///c:/a/media/SmartPhone App.swf">
<param name="loop" value="false">
<param name="menu" value="true">
<param name="quality" value="best">
<param name="bgcolor" value="#FFFFFF">
<embed
src="file:///c:/a/media/SmartPhone App.swf"
width="512"
height="288"
loop="false"
quality="best"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
</div>
</td>
</tr>
</table>
</video>

Das könnte »höher integriert« sein, aber da ich Laien anleiten muss ggf. was zu ändern zählt hier die Übersicht.
Ich wage mit nicht vorzustellen, dass die Table- und Div-Einheiten hier Probleme machen; das ist Rest-HTML um die Flash-Blöcke dahin zu bekommen wo ich sie haben will: in er Mitte.

Eric March


PS: Ich kann keinen «Player» der als Bedienleiste auftaucht gebrauchen. Das soll beeinflussungslos 1x durchlaufen.