Frage stellen

Videowiedergabe / Codewahl für Browser via JavaScript / HTML5

5.5k Aufrufe
Gefragt in Webseiten HTML von ericmarch Experte (4.6k Punkte)
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

19 Antworten

0 Punkte
Beantwortet von
Codebeispiel?
0 Punkte
Beantwortet von ericmarch Experte (4.6k Punkte)
Im Prinzip geht es um eine Sequenz wie diese:
<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" />
<center>Der Browser kennt das HTML-5 Video-Tag nicht (MP4/OGG), daf&uuml;r spielt er diese SWF:
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#ffffff">
<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="/a/media/SPA.swf">
<param name="loop" value="false">
<param name="menu" value="true">
<param name="quality" value="best">
<param name="bgcolor" value="#FFFFFF">
<embed
src="/a/media/SPA.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>
<br>
</video>

Wunschgedanke: wenn (wie im Code) der Browser der Zielperson HTML5 kann sollte je nach dem das MP4 oder da OGG abgespielt werden, kann er nicht (im Grunde soll HTML5 eine Option sein wenn der Kunde nicht Flash kann…) dann soll formal logisch der Ersatzcode des <video>-Tag anspringen der rein Zufällig Code enthält der normal unter HTML4 das Video als SWF wiedergibt.

Ich komme mit dem Testen nicht nach… War das Chrome der mir mit obigem Code sowohl das Video-Tag wie den HTML4-Code in 2 Fenstern abspielte? Der IE8 (XP - juchee!) gibt natürlich nur den Ersatzcode wieder.

JS letztlich kann ich nicht überreden in einer Select-Konstruktion mit Document.Write bzw. .WriteLn diese Zeilen zu schreiben was der »Plan B« ist wenn, wie angedeutet, das ›Normale‹ nicht spurt.

Hoffe, das waren die erwünschten Infos,
Eric March
0 Punkte
Beantwortet von
was ist mit dem JavaScript-teil?
0 Punkte
Beantwortet von ericmarch Experte (4.6k Punkte)
Zweitrangig, was das Kernproblem angeht.

<html><head>
<title>Test</title>
<script type="text/javascript">
<!-- Begin
function johannes();
{
document.writeln("<video width=512 height=288 poster=\'video.jpg\' controls=\'controls\' autoplay=\'autoplay\'>");
document.writeln("<source src='SmartPhone App.mp4' type='video/mp4' />");
document.writeln("<source src='SmartPhone App.ogg' type='video/ogg' />");
document.writeln("</video>");
}
</script>
</head>

<body>
Dummyzeile
<script type="text/javascript">
johannes;
</script>

<script type="text/javascript">
var Eingabe = window.prompt("Geben Sie eine Zahl zwischen 1 und 4 ein:", "0");
switch (Eingabe) {
case "1":
alert("Sie sind sehr bescheiden");
break;
case "2":
alert("Sie sind ein aufrichtiger Zweibeiner");
break;
case "3":
alert("Sie haben ein Dreirad gewonnen");
break;
case "4":
alert("Gehen Sie auf allen Vieren und werden Sie bescheidener");
break;
case "5":
// alert("Geht nicht");
johannes();
break;
default:
alert("Sie bleiben leider dumm");
break;
}
</script>
</body></html>


Woher ich das gekalut habe dürfte klar sein. Wie auch immer wird da der Code der die Zeilen die das Video-Tag schreiben sollten nicht funktioniert.

Würde der Standard im vorigen Code gehen wäre eine Aktion [ich würde den Browser erkennen lassen und auf zurückgegebene Variable selektieren] wie diese ja unnötig.

Eric March
0 Punkte
Beantwortet von
Aber <video> und <object> funktionieren jeder für sich? Das wäre jetzt erst einmal die Basis.

Dann ist dein Ansatz nicht viel versprechend:
Mit writeln irgendwas in ein dem Browser unbekanntes <video> zu schreiben macht den schließlich nicht klüger, der weiß immer noch nichts damit anzufangen. Also musst du object/video als Alternativen anbieten, ohne sie ineinander zu setzen.

Ob deine Browserweiche sinnvoll ist, kann ich jetzt nicht erkennen, solange du den Code nicht rausrückst, ich frage jetzt auch nicht mehr danach, mit 2mal nachfragen nur Codebröckchen gesehen ist der Thread hier für mich erledigt. Bedenke einfach, dass sich Browser oft als andere ausgeben und es speziell für den IE in all seinen Varianten auch bessere Möglichkeiten (conditional comments) gibt.

PS: der HTML-Teil ist schauderhaft!
0 Punkte
Beantwortet von ericmarch Experte (4.6k Punkte)
Deine Hilfen sind mir keine rechten Hilfen…

Aber <video> und <object> funktionieren jeder für sich? Das wäre jetzt erst einmal die Basis.

Das ist doch eigentlich klar; oder warum beklage ich mich, dass das Integrieren nicht klappt?
Genauer gesagt - <video> funktioniert nicht da es Browser gibt die es nicht unterstützen; <object>, oder viel mehr SWF, funktioniert aus dem selben Grunde nicht.
Ich muss diese beiden Königskinder verheiraten. So wie im Beispiel in #2 direkt - oder über dynamisch generierten Code nach dem Rahmenprinzip aus #4 (statt Namen wird da auf Browser geprüft).

Dann ist dein Ansatz nicht viel versprechend:
Mit writeln irgendwas in ein dem Browser unbekanntes <video> zu schreiben macht den schließlich nicht klüger, der weiß immer noch nichts damit anzufangen. Also musst du object/video als Alternativen anbieten, ohne sie ineinander zu setzen.

Bla-was?
Lies den Code und die Aufgabe - dann sollte die klar sein was ich da mit WriteLn vor habe. Antwort Nummer 5 wäre ein Browser der HTML5 kann, also <video>. Ein anderer Browser käme mit ihm unverdauliche Code nur als Kommentar in Berührung. Als dividiere ich da Codes auseinenader - nur ist halt bloß ein einzelner <video> Codeblock Teil des Beispiels damits übersichtlich bleibt.

Ob deine Browserweiche sinnvoll ist, kann ich jetzt nicht erkennen, solange du den Code nicht rausrückst,

:-(
Ist es zu schwer für dich dir das Select -Teil so vorzustellen, dass bei den betreffenden Browsern (statt Nummern; den Namen liefert ein anderes Script) dort mal der <viodeo>- und mal der <object>-Code stehen könnte? Optimal als aufgerufene Fuction; aber das bedeutete andere Maßnahmen. Offenbar überfordert dich das. Hätteich auf stücker 8 browser geprüft und mehrmals den <object>-Block eingeklebt; wie groß und unübersichtlich wäre das wohl geworden???
Vermutlich muss ich eh auf Select verzichten und Oder-Verknpüfungen mit IF abarbeiten.

ich frage jetzt auch nicht mehr danach, mit 2mal nachfragen nur Codebröckchen gesehen ist der Thread hier für mich erledigt.

Vielen Dank. Anderen Leuten reichen die Codebröckchen um die essentiellen Probleme zu sehen. Und dass ich hier keine 5kb internen Code, der keinen was angeht (und den ich komplett kürzen müsste; in etwa auf das was da übrig bleibt…),poste müsste auch dir klar sein.

Bedenke einfach, dass sich Browser oft als andere ausgeben und es speziell für den IE in all seinen Varianten auch bessere Möglichkeiten (conditional comments) gibt.

Kenne ich nicht, diese c.c.; IE ist IE und kriegt kein HTML5. Und da alle bis auf diesen Apple-Krimskrams Flash können ist die ganze Operation hauptsächlich für die Apple-Gerätschaften gedacht ihnen die HTML5-Extrawurst zu braten. Mehr Unterschiede will ich gar nicht erst erfassen…

PS: der HTML-Teil ist schauderhaft!

Ich werde kaum erfahren welche du meinst da du ja raus bist.
Für alle anderen: Programm X (eingangs längst angerissen) liefert einen Code den ein anderes Modul von X im Web (= auf meinem Server) auswertet und daraus angepassten Code an den Browser zurückgibt. ICH pfusche da rein indem ich den gelieferten Code optisch umstricke und auch solche Codeblöcke einsetze die automatisiert HTML-Datei für HTML-Datei auch speziell angepasst sind (hier Auflösungen, Dateiname) - und da mache ICH mir das Programmieren der Änderungsroutinen so einfach wie möglich. Falls es darum ging warum <object> und <embed> so auf Zeilen getrimmt sind.

Eric March
0 Punkte
Beantwortet von
-> Deine Hilfen sind mir keine rechten Hilfen…
Ich werde mal dolmetschen

-> Bla-was?
in simplesprech: du nicht sollen setzen <object> in <video> sondern entweder nur <video> oder nur <object> per javascript einfügen

-> :-(
in simplesprech: javascript nicht zuverlässig browser erkennen, weil browser oft lügen bei namen, daher wichtig, wie du prüfen, nicht wie du prüfung auswerten

-> Kenne ich nicht, diese c.c.
in simplesprech: google helfen gegen unwissen

-> ich werde kaum erfahren welche du meinst da du ja raus bist.
in simplesprech: html-code hat viel unnötiges <blabla>, gegenteil von
-> so einfach wie möglich
0 Punkte
Beantwortet von ericmarch Experte (4.6k Punkte)
-> Bla-was?
in simplesprech: du nicht sollen setzen <object> in <video> sondern entweder nur <video> oder nur <object> per javascript einfügen

Och, weißte, wennde das alles richtig gelesen hättst hätts gemerkt, dassich geanu das vorhatte… Oder sisnte irgnedein Beispiel wo im Select in eienr Ausweahl bei Tags zusamme auftauchen? Ich nicht.

-> :-(
in simplesprech: javascript nicht zuverlässig browser erkennen, weil browser oft lügen bei namen, daher wichtig, wie du prüfen, nicht wie du prüfung auswerten

Das Risiko der Große Häuptlich müssen eingehen. Howgh.
Wer seien Browser so einstellt, dass der Mist zurückmeldet muss sich nicht beschweren wenn er Mist geliefert bekommt. Das liegt nicht ›an uns‹. Ooperes zum Bleistift ist so blöde nicht mal an die eigene Verwaltungsseite sich korrekt zurückzumelden wenn er im Rahmen eines Tests (rate wessen) sich als IE outen soll…

-> Kenne ich nicht, diese c.c.
in simplesprech: google helfen gegen unwissen

Mittlerweile gelernt; nützt nix da der IE meine kleinste Sorge wäre. Das Problem heißt vordringlich Apple.

-> ich werde kaum erfahren welche du meinst da du ja raus bist.
in simplesprech: html-code hat viel unnötiges <blabla>, gegenteil von
-> so einfach wie möglich

Grund siehe oben - ich kann nur das nehmen was mir ein System vor die Füße wirft und an entscheidenden Stellen unverändert zurückbekommen möchte. Wäre nicht Apples Extravaganz Flash zu boykottieren (OK, HTML5 sollte eigentlich langsam Usus sein, aber du kennst den netten Begriff der Abwärtskompatibilität?) dann hätte ich ein paar Klimmzüge weniger.
Ich bin froh es immerhin so weit gedeichselt zu haben Kollegen zu ermöglichen aus prägeneriertem Code funktionierende Einzelpages mit erweiterten Möglichkeiten (Video ist eins von vielen Modulen) zu generieren, auf Knopfdruck quasi. Und selbst da muss hier und da immer noch nachfrisiert werden…

Eric March
0 Punkte
Beantwortet von
-> Oder sisnte irgnedein Beispiel wo im Select in eienr Ausweahl bei Tags zusamme auftauchen? Ich nicht.

genau: beispielcode nicht vollständig. gut dass du erkannt hast. nächste mal gleich richtig posten, dann keine verwirrung bei supportern
0 Punkte
Beantwortet von ericmarch Experte (4.6k Punkte)
Der Beispielcode ist im unteren Beispiel erstaunlicherweise vollständig da er exakt das Problem darlegt. dass kein Code/Textzeilen, welcher Art auch immer, aus der Select-Konsruktion geschrieben wird.
Sich um die obere Sequenz Head und Body zu denken ist sicherlich zu viel verlangt?

Beide Sequenzen bedienen vollständig die Problematik, dass entweder das Video-Tag nicht beschreibungsgemäß geparst wird, oder dass alternativ über Select es nicht gelingt Code auswerfen der geparst würde.

Eric March
Seite:
...