Je souhaite utiliser une vidéo comme arrière-plan au lieu d'une image qui s'étend automatiquement sur tout l'écran (arrière-plan).
Je souhaite également faire pivoter les vidéos et les images .. afin qu’une image / vidéo aléatoire soit affichée dans n’importe quel ordre.
Il serait également intéressant de savoir comment retarder la lecture de la vidéo, afin que celle-ci ne soit lue qu'une fois 30 secondes après le chargement du site.
THX!
Jetez un oeil à mon plugin jQuery videoBG
http://syddev.com/jquery.videoBG/
Faites de toute vidéo HTML5 un fond de site ... a une image de repli pour les navigateurs qui ne prennent pas en charge le langage HTML5
Vraiment facile à utiliser
Faites-moi savoir si vous avez besoin d'aide.
Tout d'abord, votre balisage HTML ressemble à ceci:
<video id="awesome_video" src="first_video.mp4" autoplay />
Deuxièmement, l'option JavaScript de votre code devrait ressembler à ceci:
<script type="text/javascript">
var index = 1,
playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'],
video = document.getElementById('awesome_video');
video.addEventListener('ended', rotate_video, false);
function rotate_video() {
video.setAttribute('src', playlist[index]);
video.load();
index++;
if (index >= playlist.length) { index = 0; }
}
</script>
Et le dernier mais non le moindre, votre CSS:
#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Cela va créer un élément de vidéo sur votre page qui démarre la lecture de la première vidéo, puis parcourt la liste de lecture défini par la variable JavaScript. Votre kilométrage avec le CSS peut varier en fonction de la CSS pour le reste du site, mais 100% de la largeur/hauteur doit le faire sur une page de base.
J'ai peut-être une solution pour la vidéo en arrière-plan, tendu vers le navigateur de la largeur ou de la hauteur, (mais la vidéo va toujours conserver les proportions, ne pourrait pas trouver une solution pour que encore.):
Mettre la vidéo juste après la balise "body" avec style="width:100%;".
Droit postfaces, mettre un "bodydummy"-tag:
<body>
<video id="bgVideo" autoplay poster="videos/poster.png">
<source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/>
<source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/>
<source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>
</video>
<img id="bgImg" src="videos/poster.png" />
<!-- This image stretches exactly to the browser width/height and lies behind the video-->
<div id="bodyDummy">
Mettez tous vos contenus à l'intérieur de l' bodydummy-div et mettre le z-index correctement dans le CSS comme ceci:
#bgImg{
position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1;
width: 100%;
height: 100%;
}
#bgVideo{
position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 2;
width: 100%;
height: 100%;
}
#bodyDummy{
position: absolute;
top: 0;
left: 0;
z-index: 3;
overflow: auto;
width: 100%;
height: 100%;
}
J'espère que je pourrais aider. Laissez-moi savoir quand vous pourriez trouver une solution pour que la vidéo n'est pas de maintenir le ratio d'aspect, de sorte qu'il pourrait remplir toute la fenêtre du navigateur afin de ne pas avoir à mettre un bgimage.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
