Safari <video>

[Jessica]

Hallo,

kann es sein, dass der Safari diesen Code so nicht möchte?

  
<div id="inhalt_archiv">  
<video controls>  
<source src="video/Collien_Fernandes_Palina_Rojinski_Comet_Opening_20.mp4" type="video/mp4">  
<source src="video/Collien_Fernandes_Palina_Rojinski_Comet_Opening_20.ogv" type="video/ogg">  
</video>  
</div>  

mein CSS sieht so aus:

  
video {  
	width:100%  
}  
  
#inhalt_archiv {  
	width:660px;  
	float:left;  
	text-align:justify;  
}  

So sieht es unter Safari in Windows aus:

Und so sieht es unter Chrome aus ebenfalls in Windows:

nee Freundin meinte gerade, dass es im Safari unter MAC gut aussieht, kann es so zu unterschieden kommen zwischen Windows und MAC? Wenn ich hier schaue http://caniuse.com/#search=video dann kann der Safari <video> nur in der Version 7 ist das richtig? Was müsste ich dann ändern?

[Gunnar Bittersmann]

@@Jessica:

nuqneH

nee Freundin meinte gerade, dass es im Safari unter MAC gut aussieht, kann es so zu unterschieden kommen zwischen Windows und MAC?

Ja. Safari für Windows war noch nie ein ernstzunehmender Browser.

Wenn ich hier schaue http://caniuse.com/#search=video dann kann der Safari <video> nur in der Version 7 ist das richtig? Was müsste ich dann ändern?

Safari 6 auf Mac und iOS solltest du aber berücksichtigen.

Qapla'

[Jessica]

Hallo,

Safari 6 auf Mac und iOS solltest du aber berücksichtigen.

wie müsste ich das dann umbauen, dass es auf Safari 6 ebenfalls richtig läuft? Hast du für mich ein Beispiel oder nee Seite wo ich das nachlesen kann?

Gruß
Jessica

[Gunnar Bittersmann]

@@Jessica:

nuqneH

Safari 6 auf Mac und iOS solltest du aber berücksichtigen.

wie müsste ich das dann umbauen, dass es auf Safari 6 ebenfalls richtig läuft?

„Berücksichtigen“ kann auch heißen, Links zu den Videos anzubieten, wenn Browser das video-Element nicht nativ unterstützen (progressive enhancement):

<video>  
  <source src="http://example.net/video">  
  <p><a href="http://example.net/video">Video</a>  
</video>

Oder einen Flash-Videoplayer als Fallback.

Hast du für mich ein Beispiel oder nee Seite wo ich das nachlesen kann?

MDN.

Wobei „Your browser does not support the <code>video</code> element.“ natürlich Schwachsinn ist. Wie anno dazumals „Ihr Browser unterstützt keine Frames.“

Qapla'

[Gunnar Bittersmann]

@@Jessica:

nuqneH

video {

width:100%
}

  
Sollte da vielleicht noch `display: block` mit rein?  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)