HTML5 Video Safari/FireFox/Chtome/IE @ tutorials.de: Tutorials, Forum & Hilfe

andreano · 17.02.12 16:09

Hallo allerseits,

ich weiß das nicht alle Browser / b.z.w. nur die "neusten" Browser sich mit HTML5 auseinandersetzen/verarbeiten.

Ich weiß aber das :
Firefox 3.5+ / Chrome 3.0+ / Internet Explorer 9.0+ / Opera 9.2+ / Safari 4+

Das HTML5 verarbeiten können.!

Mein Problem ist das mein Video in Safari v. 5.1.2 nicht Spielbar ist bzw ich die Meldung kriege das der Browser kein HTML5 wiedergeben kann!
Wieso****? Es wirt doch ab der Version 4 schon unterstützt!

HTML-Code:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Video/Flash Video Demo</title>
</head>     
<body>
<center>
<video poster="Startbild.png" preload="auto" width="480" controls > 
	<source src="video.ogv" type="video/ogg; codecs="theora, vorbis"" />
	<source src="movie.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" />
	<source src="video.webm" type="video/webm; codecs="vp8, vorbis"" />
	<p>Ihr Browser Unterstützt kein HTML5</p>
</video> 
</center>
<!--[if IE]>
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="480" height="270">
	<param name="movie" value="player/player-licensed.swf" />
	<param name="allowfullscreen" value="true" />
	<param name="allowscriptaccess" value="always" />
	<param name="flashvars" value="file=video.flv&image=Startbild.png" />
	<embed
		type="application/x-shockwave-flash"
		id="player2"
		name="player2"
		src="player/player-licensed.swf" 
		width="360" 
		height="308"
		allowscriptaccess="always" 
		allowfullscreen="true"
		flashvars="file=video.flv&image=Startbild.png"
	/>
</object>
<![endif]-->

</body>
</html>

Kann mir da einer Helfen? Ein tipp geben, ich habe sogar eine weiche für IE mit Flash eingebaut.
Aber mit Safari bin ich echt ratlos.

Gruß Aleks

***CPoly*** · 18.02.12 11:13

Bist du sicher, dass die Datei nicht "video.mp4" heißt? Ist das erste was mir aufgefallen ist. Oft übersieht man solche Details.

andreano · 21.02.12 11:13

Das mit dem "video.mp4" hast du recht, aber dran liegt es auch nicht!

Leute im ernst kann mir einer helfen? Habe zwischenzeitlich sogar das "Apfel" selbst angeschrieben, die Antworten aber nicht.

Ich meine ja nur sogar "Apfel" selbst wirbt auf seiner HP das ihr Browser HTML5 Unterstützt hier -> http://www.apfel.com/html5/

Ich wäre über jede Hilfe dankbar******

***CPoly*** · 21.02.12 11:23

Was mir gerade noch auffällt, dass bei dir was mit den Attributen nicht stimmt (falsche Anführungsstriche). Aber das hat dir bestimmt auch der Validator gesagt.

HTML-Code:

<!--Vorher-->
<source src="movie.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" />

<!--Nachher-->
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

Wenn es dann noch immer nicht geht, stell sicher, dass es nicht an der Videodatei liegt und lade dir das von der Apple Seite herunter (http://movies.apple.com/media/us/htm...us_848x352.m4v).

andreano · 21.02.12 11:38

Das mit den "Falschen Anführungsstriche" hattest du recht, aber es liegt dran auch nicht

Das "beste" dran ist ich kriege meien "fehlermeldung"

Code :

1	<p>Ihr Browser Unterstützt kein HTML5</p>

***CPoly*** · 21.02.12 11:42

Hast du es auch mit der Videodatei von apple.com versucht? Ansonsten könnte ich mir vorstellen, dass es daran liegt, dass du lokal arbeitest (file:// "Protokoll") und der passende Content-Type header fehlt. Vielleicht versuchst du es mal über Apache oder einen anderen Webserver.

andreano · 21.02.12 11:44

Ich Arbeite über Apache.
Zu dem Apfel Video, finde ich leider keien passende Codecs, im sinne von

Code :

1	codecs="avc1.42E01E, mp4a.40.2"

so zwischen stand ich habe die richtigen Codecs gefunden, sind die gleichen wie bei mp4 videos.

aber das *Piep* teil will das immer noch nicht wiedergeben!

andreano · 21.02.12 12:44

Mein Zwischenstand:

Code :

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Video/Flash Video Demo</title>
</head>     
<body>
<center>
<video poster="Startbild.png" preload="auto" width="480" controls > 
        <source src='video.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
        <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'/>
        <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
        <source src='video.m4v' type='video/m4v codecs="avc1.42E01E, mp4a.40.2"' />
</video> 
<!--[if IE]>
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="480" height="310">
    <param name="movie" value="player/player-licensed.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="flashvars" value="file=video.flv&image=Startbild.png" />
    <embed
        type="application/x-shockwave-flash"
        id="player2"
        name="player2"
        src="player/player-licensed.swf"
        width="360"
        height="308"
        allowscriptaccess="always"
        allowfullscreen="true"
        flashvars="file=video.flv&image=Startbild.png"
    />
</object>
<![endif]-->
</center>
</body>
</html>

was gemacht wurde:

das Video wurde richtig unbenannt
dir anführungszeichen wurden ausgetauscht
das Video-Format .m4v wurde getestet (ohne ergebnis)

***CPoly*** · 21.02.12 12:49

Ok. Dann prüfe nach ob dein Apache den korrekten Header sendet http://stackoverflow.com/questions/2...ome-is-all-goo

andreano · 21.02.12 13:02

Ich schätze es ist alles richtig wenn du das meinst:

HTTP/1.1 304 Not Modified
Date: Tue, 21 Feb 2012 11:58:50 GMT
Server: Apache
Connection: Keep-Alive
Keep-Alive: timeout=15, max=97
Etag: "bla-bla-bla"
Vary: Accept-Encoding

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Cache-Control: max-age=0
Connection: keep-alive
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
Host: xxx
If-Modified-Since: Tue, 21 Feb 2012 11:24:57 GMT
If-None-Match: "d68e9-4b8-4b977a9271440"
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2

***CPoly*** · 21.02.12 13:18

Das war ein gecachter Request (304). Da steht kein Content-Type dabei. Guck mal was bei einer 200 Antwort steht (strg+f5 lädt in den meisten Browsern Dateien ohne Cache neu).

andreano · 21.02.12 13:41

Es kann sein das ich dich Flasch verstanden habe oder nicht weiß was du willst.

Sorry

***CPoly*** · 21.02.12 13:50

Ich will sehen, was der Server senden (welche Header), wenn du die Videodatei anfragst. Das hast du auch gepostet. Allerdings ist die Videodatei im Cache deines Browsers und der Server hat nur geantwortet "Die Datei in deinem Cache ist noch aktuell" anstatt dir die Datei zu schicken. Ergo fehlt auch der Content-Type Header, um den es hier geht. Um deinen Browser zu zwingen die Datei vom Server neu anzufragen, kannst du strg+F5 drücken oder du musst den Cache deines Browsers kurz deaktivieren.

andreano · 21.02.12 14:03

ich hoffe das ist das was du brauchst, weil sonst weil ich nicht was ich weiter machen soll / kann

Code :

GET /html5/index.html HTTP/1.1
Host: xxx
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 200 OK
Date: Tue, 21 Feb 2012 12:55:00 GMT
Server: Apache
Last-Modified: Tue, 21 Feb 2012 12:52:23 GMT
Etag: "d68e9-44d-4b978e1d6afc0"
Accept-Ranges: bytes
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 523
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html
----------------------------------------------------------
http://xxx/html5/video.webm
 
GET /html5/video.webm HTTP/1.1
Host: xxx
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Connection: keep-alive
Range: bytes=0-
Referer: http://xxx/html5/index.html
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 206 Partial Content
Date: Tue, 21 Feb 2012 12:55:01 GMT
Server: Apache
Last-Modified: Tue, 14 Feb 2012 11:35:12 GMT
Etag: "d68e7-8d673d-4b8eafceb9c00"
Accept-Ranges: bytes
Content-Length: 9267005
Content-Range: bytes 0-9267004/9267005
Keep-Alive: timeout=15, max=99
Connection: Keep-Alive
Content-Type: text/plain
----------------------------------------------------------
http://xxx/html5/video.ogv
 
GET /html5/video.ogv HTTP/1.1
Host: xxx
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Connection: keep-alive
Range: bytes=0-
Referer: http://xxx/html5/index.html
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 206 Partial Content
Date: Tue, 21 Feb 2012 12:55:01 GMT
Server: Apache
Last-Modified: Tue, 14 Feb 2012 15:01:59 GMT
Etag: "d68e5-22c35df-4b8ede06f67c0"
Accept-Ranges: bytes
Content-Length: 36451807
Content-Range: bytes 0-36451806/36451807
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: video/ogg
----------------------------------------------------------
http://xxx/html5/Startbild.png
 
GET /html5/Startbild.png HTTP/1.1
Host: xxx
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: http://xxx/html5/index.html
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 200 OK
Date: Tue, 21 Feb 2012 12:55:01 GMT
Server: Apache
Last-Modified: Fri, 17 Feb 2012 12:24:02 GMT
Etag: "d68e4-3edb5-4b9280515fc80"
Accept-Ranges: bytes
Content-Length: 257461
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: image/png
----------------------------------------------------------
http://xxx/html5/video.ogv
 
GET /html5/video.ogv HTTP/1.1
Host: xxx
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Connection: keep-alive
Range: bytes=36438016-
Referer: http://xxx/html5/index.html
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 206 Partial Content
Date: Tue, 21 Feb 2012 12:55:01 GMT
Server: Apache
Last-Modified: Tue, 14 Feb 2012 15:01:59 GMT
Etag: "d68e5-22c35df-4b8ede06f67c0"
Accept-Ranges: bytes
Content-Length: 13791
Content-Range: bytes 36438016-36451806/36451807
Keep-Alive: timeout=15, max=99
Connection: Keep-Alive
Content-Type: video/ogg
----------------------------------------------------------
http://xxx/html5/video.ogv
 
GET /html5/video.ogv HTTP/1.1
Host: xxx
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Connection: keep-alive
Range: bytes=786432-
Referer: http://xxx/html5/index.html
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 206 Partial Content
Date: Tue, 21 Feb 2012 12:55:03 GMT
Server: Apache
Last-Modified: Tue, 14 Feb 2012 15:01:59 GMT
Etag: "d68e5-22c35df-4b8ede06f67c0"
Accept-Ranges: bytes
Content-Length: 35665375
Content-Range: bytes 786432-36451806/36451807
Keep-Alive: timeout=15, max=98
Connection: Keep-Alive
Content-Type: video/ogg
----------------------------------------------------------
http://xxx/html5/video.webm
 
GET /html5/video.webm HTTP/1.1
Host: xxx
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Connection: keep-alive
Range: bytes=0-
Referer: http://xxx/html5/index.html
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
 
HTTP/1.1 206 Partial Content
Date: Tue, 21 Feb 2012 12:55:05 GMT
Server: Apache
Last-Modified: Tue, 14 Feb 2012 11:35:12 GMT
Etag: "d68e7-8d673d-4b8eafceb9c00"
Accept-Ranges: bytes
Content-Length: 9267005
Content-Range: bytes 0-9267004/9267005
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/plain
----------------------------------------------------------
http://xxx/html5/video.ogv
 
GET /html5/video.ogv HTTP/1.1
Host: xxx
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Connection: keep-alive
Range: bytes=786432-
Referer: http://xxx/html5/index.html
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
If-Range: "d68e5-22c35df-4b8ede06f67c0"
 
HTTP/1.1 206 Partial Content
Date: Tue, 21 Feb 2012 12:55:05 GMT
Server: Apache
Last-Modified: Tue, 14 Feb 2012 15:01:59 GMT
Etag: "d68e5-22c35df-4b8ede06f67c0"
Accept-Ranges: bytes
Content-Length: 35665375
Content-Range: bytes 786432-36451806/36451807
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: video/ogg
----------------------------------------------------------
http://xxx/favicon.ico
 
GET /favicon.ico HTTP/1.1
Host: xxx
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
 
HTTP/1.1 404 Not found
Date: Tue, 21 Feb 2012 12:55:06 GMT
Server: Apache
X-Powered-By: PHP/5.3.3-7+squeeze3
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 750
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html
----------------------------------------------------------
http://xxx/html5/video.ogv
 
GET /html5/video.ogv HTTP/1.1
Host: xxx
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Connection: keep-alive
Range: bytes=36438016-
Referer: http://xxx/html5/index.html
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
 
HTTP/1.1 206 Partial Content
Date: Tue, 21 Feb 2012 12:55:07 GMT
Server: Apache
Last-Modified: Tue, 14 Feb 2012 15:01:59 GMT
Etag: "d68e5-22c35df-4b8ede06f67c0"
Accept-Ranges: bytes
Content-Length: 13791
Content-Range: bytes 36438016-36451806/36451807
Keep-Alive: timeout=15, max=99
Connection: Keep-Alive
Content-Type: video/ogg
----------------------------------------------------------
http://xxx/html5/video.ogv
 
GET /html5/video.ogv HTTP/1.1
Host: xxx
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Connection: keep-alive
Range: bytes=786432-
Referer: http://xxx/html5/index.html
Cookie: mf_user=1; __utma=48489974.1210609403.1326804483.1326804483.1326804483.1; __utmz=48489974.1326804483.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); style=normal
 
HTTP/1.1 206 Partial Content
Date: Tue, 21 Feb 2012 12:55:08 GMT
Server: Apache
Last-Modified: Tue, 14 Feb 2012 15:01:59 GMT
Etag: "d68e5-22c35df-4b8ede06f67c0"
Accept-Ranges: bytes
Content-Length: 35665375
Content-Range: bytes 786432-36451806/36451807
Keep-Alive: timeout=15, max=98
Connection: Keep-Alive
Content-Type: video/ogg
----------------------------------------------------------

***CPoly*** · 21.02.12 14:09

Ja, aber da fehlt die Anfrage zur mp4 Datei.

Folgender kann man aber erkennen:

Die .ogv Datei wird als "video/ogg" versendet, was korrekt ist.
Die .webm Datei wird als "text/plain" versendet, was falsch ist.

Für die .mp4 Datei muss es "video/mp4" sein. Jetzt such im Netz danach wie man bei Apache eine Dateiendung mit einem Content-Type (mime) verknüpft. Ich muss jetzt los zum Bus.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Umlautproblem - utf-8 gespeichert wird jedoch in FireFox nicht erkannt, html5

Prototypischer HTML5 basierter Live Video Chat

HTML5 Problem: tabindex und autofocus bei Safari/Chrome

[HTML5] Video am Ende mit Endlosschleife

Bildanzeige im IE, Firefox und Safari

Stichworte

E-Mail:

Abonnieren Abbestellen