r3m4 Geschrieben 24. September 2012 Geschrieben 24. September 2012 Hallo zusammen, ich wurde von unserer Marketing Abteilung gefragt ob wir auf unserer Homepage ein kleines HTML 5 Video hinterlegen können um auf der nächsten Messe darauf zu verweisen. Das habe ich jetzt die letzten Stunden auch versucht und bin inzwischen soweit gekommen, dass es zwar angezeigt wird aber im Internet Explorer nicht abgespielt werden kann. Nachdem ich zu Beginn an eine falsche Pfadangabe geglaubt habe, bin ich einfach mal mit dem iPhone auf die Seite gesurfed und habe gemerkt dass es funktioniert. Mit dem Google Chrome funktioniert es ebenfalls genau wie gewünscht. Lediglich Firefox und IE 9 und 10 machen Probleme damit. Vielleicht kann sich das ja einer mal anschauen und mir einen Tipp geben was falsch gemacht wird. Es ist eine Joomla Page und die Videos sind mit folgendem Code eingebunden: <video src="VideoTest/videos/video.mp4" autobuffer controls> <div>Schade – hier käme ein Video, wenn Ihr Browser HTML5 Unterstützung hätte, wie z.B. der aktuelle Firefox</div> </video> <video src="VideoTest/videos/maus.ogg" autobuffer controls> <div>Schade – hier käme ein Video, wenn Ihr Browser HTML5 Unterstützung hätte, wie z.B. der aktuelle Firefox</div> </video> <video src="VideoTest/videos/test.mp4" poster="VideoTest/videos/preview.jpg" autobuffer controls> <div>Schade – hier käme ein Video, wenn Ihr Browser HTML5 Unterstützung hätte, wie z.B. der aktuelle Firefox</div> </video> Die Page auf der die Tests zu finden sind lautet: Video Testseite Danke für alle die mithelfen und Grüße Jochen Zitieren
Enno Geschrieben 24. September 2012 Geschrieben 24. September 2012 du gibst kein type = mit kuck mal hier: Videos in HTML 5 einbinden mit <video> <video> <source src="video.ogg" type="video/ogg" /> </video> Zitieren
r3m4 Geschrieben 24. September 2012 Autor Geschrieben 24. September 2012 Hi Enno, genau auf der Seite habe ich auch zu Beginn geschaut und dabei folgenden Standardcode herausgefunden (steht ein paar Zeilen unter den von dir genannten): <video src="video.ogg" width="320" height="240" poster="video-standbild.jpg" autobuffer autoplay controls> <div>Schade – hier käme ein Video, wenn Ihr Browser HTML5 Unterstützung hätte, wie z.B. der aktuelle Firefox</div> </video> Aus diesem Grund habe ich auch die Angabe des type weggelassen. Zitieren
Enno Geschrieben 24. September 2012 Geschrieben 24. September 2012 gib mal einfach den Type mit. Dann siehst ja sofort obs dran lag. Ich behaupte mal ja. Zitieren
r3m4 Geschrieben 24. September 2012 Autor Geschrieben 24. September 2012 Also ich hab den Code jetzt wie folgt geändert: <video src="VideoTest/videos/video.mp4" autobuffer controls type="video/mp4" /> </video> <video src="VideoTest/videos/maus.ogg" autobuffer controls type="video/ogg" /> <div>Schade – hier käme ein Video, wenn Ihr Browser HTML5 Unterstützung hätte, wie z.B. der aktuelle Firefox</div> </video> Funktioniert leider immer noch nicht. Die Variante ohne Variablen ist leider auch nicht befriedigend da wir später steuern müssen was alles passiert beim laden des Videos. Hast du noch ne Idee? Ich habe auch den JWPlayer auf dem Server drauf, der aber nach Forenmeinungen und meiner Erfahrung nicht auf dem iPhone läuft. Grüße Jochen Zitieren
Enno Geschrieben 24. September 2012 Geschrieben 24. September 2012 im 3ten Video Tag in dem du poster= mit gibst ist noch kein type drin. warum gibst du eigentlich 3mal das video mit? Zitieren
r3m4 Geschrieben 24. September 2012 Autor Geschrieben 24. September 2012 Ich bin im Moment einfach mal am testen ob ich es auf irgendeine Weise mal hinbekomme dass alles läuft. Wir haben jetzt folgendes rausgefunden. Mit untenstehendem Code läuft das meiste auf dem iPhone, nahezu alle unter MAC auf Safari aber kein einziges mit dem IE. Mit Chrome funktioniert das erste zweite und dritte. Mit Safari funktionieren alle außer dem zweiten und vierten. <!doctype html> <p><img height="260" width="708" alt="endlich_freude_am_schaeumen" border="0" src="images/ceracon/endlich_freude_am_schaeumen.jpg" /><br style="clear: both;" /></p> <h1>Seite für den HTML5-Videotest</h1> <video src="videotest/videos/video.mp4" autobuffer controls type="video/mp4" /> </video> <video src="videotest/videos/maus.ogg" autobuffer controls type="video/ogg" /> <div>Schade – hier käme ein Video, wenn Ihr Browser HTML5 Unterstützung hätte, wie z.B. der aktuelle Firefox</div> </video> <video src="videotest/videos/test.mp4" poster="videotest/videos/preview.jpg" autobuffer controls> <div>Schade – hier käme ein Video, wenn Ihr Browser HTML5 Unterstützung hätte, wie z.B. der aktuelle Firefox</div> </video> </br> "mp4" => ' <object type="application/x-shockwave-flash" width="{WIDTH}" height="{HEIGHT}" data="videotest/mediaplayer/player.swf"> <param name="movie" value="videotest/mediaplayer/player.swf" /> <param name="quality" value="high" /> <param name="wmode" value="{TRANSPARENCY}" /> <param name="bgcolor" value="{BACKGROUND}" /> <param name="autoplay" value="{AUTOPLAY}" /> <param name="allowfullscreen" value="{FULLSCREEN}" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="file=videotest/videos/test.mp4ℑ=videotest/videos/preview.jpg&autostart={AUTOPLAY}&fullscreen={FULLSCREEN}{FLASHVARS}{PLUGINS}" /> <video poster="videotest/videos/preview.jpg" src="videotest/videos/test.mp4" width="{WIDTH}" height="{HEIGHT}" controls="controls"></video> </object> ', Hier sollte jetzt dann auch mal noch ein wenig Text stehen dass das ganze nicht so allein ist </br></br></br></br></br></br></br></br></br></br></br> <Video width="320" height="240" autoplay controls> <source src="videotest/videos/test.mp4" type="Video/mp4"> fallback </video> Ich habe jetzt einfach mal die beiden oberen mit dem Video type getestet. Falls jemand eine komplett andere Lösung hat bin ich auch dankbar, die Anforderungen sind einfach gesamt wie folgt: -Muss auf allen gängigen Browsern abzuspielen sein. -Muss zwingend auf dem Handy, also iPhone und Android laufen -Sollte am liebsten auch noch vom Player frei konfigurierbar sein, wie zum Beispiel die Farbe der Bedienelemente im IE (Der JWPlayer kann das und ist auch von uns lizenziert.) Grüße Jochen Zitieren
r3m4 Geschrieben 24. September 2012 Autor Geschrieben 24. September 2012 Hmm ich befürchte dass es nur ein Workaround ist aber es funktioniert auf jeden Fall jetzt Nach den ganzen Ergebnissen habe ich mir gedacht dass es wohl am sinnvolsten ist den JWPlayer auf Flashbasis zu nehmen und als Fallback dann eine native HTML 5 Einbettung. Damit haben wir nun alle Fälle abgedeckt die so passieren können. Funktioniert auf mobilen Endgeräten und auch auf den Desktops. Hier ist zum Beispiel unser Code für den Test: <p id="container1"> <video src="http://ceracon.com/videotest/videos/test.mp4" poster="videotest/videos/preview.jpg" autobuffer controls> </video> </p> <script type="text/javascript"> var flashvars = { file:'http://ceracon.com/videotest/videos/test.mp4',autostart:'true' }; var params = { allowfullscreen:'true', allowscriptaccess:'always' }; var attributes = { id:'player1', name:'player1' }; swfobject.embedSWF('videotest/mediaplayer/player.swf','container1','480','270','9.0.115','false', flashvars, params, attributes); </script> Das fett gedruckte ist die Fallback Lösung für alle nicht unterstützten Browser. Zitieren
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.