Zum Inhalt springen

HTML 5 Video läuft nur auf iPhone und Google Chrome Browser

r3m4

Von r3m4
in Webdesign

 Teilen

Empfohlene Beiträge

r3m4

r3m4

Geschrieben
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
r3m4

r3m4

Geschrieben
  • Autor
Geschrieben

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
r3m4

r3m4

Geschrieben
  • Autor
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
r3m4

r3m4

Geschrieben
  • Autor
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
r3m4

r3m4

Geschrieben
  • Autor
Geschrieben

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen

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.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...