Utilisation du couple html 5 / CSS 3 - test de certaines propriétés CCS3
Les navigateurs n'étant pas d'accord sur un format commun, pour être certain du bon fonctionnement, il nous faut plusieurs fichiers : ogv, mp4, webm et flv
De plus je vous conseille de rajouter ces quelques lignes dans le .htaccess.
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Comme pour l'audio, il nous faut une alternative pour le "Fameux IE9", ce sera donc le format FLV lu par un player Flash. L'excellent site Alsacréation nous fourni gracieusement un lecteur de leur cru.
<video
width="550" height="310"
controls="controls"
preload="auto"
autoplay
poster="http://www.alex-bernardini.fr/videos/poster.jpg">
<source src="http://www.alex-bernardini.fr/videos/Wildlife.mp4" type="video/mp4" />
<source src="http://www.alex-bernardini.fr/videos/Wildlife.webm" type="video/webm" />
<source src="http://www.alex-bernardini.fr/videos/Wildlife.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="dewtube.swf" width="550" height="310">
<param name="allowFullScreen" value="true" />
<param name="movie" value="http://www.alex-bernardini.fr/videos/dewtube.swf" />
<param name="flashvars" value="movie=http://www.alex-bernardini.fr/videos/Wildlife.flv&width=512&height=384&autostart=1" />
</object>
</video>
J'ai lu quelque part, qu'il fauit absolument, mettre en première place le lecteur MP4, sinon celui-ci est ignoré.
Les attributs
Une autre alternative : http://videojs.com/
Avec cette solution, plus aucun soucis, ca fonctione partout .
<video class="video-js" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":true,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
#video-fond {
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#video-fond > video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* 1. Pas de support d'object-fit */
@media (min-aspect-ratio: 16/9) {
#video-fond > video {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
#video-fond > video {
width: 300%;
left: -100%;
}
}
/* 2. En cas de support d'object-fit, écrase les règles en (1) */
@supports (object-fit: cover) {
#video-fond > video {
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
}
html {
margin:0;
padding:0;
background:url(/informatique/html5/images/shutterstock_01-SD.jpg)no-repeat center center fixed;
background-size: cover;
}