VIDEO EN FOND DE PAGE WEB (HTML5)
Flachy Joe
Messages postés
2103
Date d'inscription
jeudi 16 septembre 2004
Statut
Membre
Dernière intervention
21 novembre 2023
-
29 juil. 2010 à 21:52
teslacore Messages postés 2 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 1 juillet 2012 - 1 juil. 2012 à 19:58
teslacore Messages postés 2 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 1 juillet 2012 - 1 juil. 2012 à 19:58
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/52118-video-en-fond-de-page-web-html5
https://codes-sources.commentcamarche.net/source/52118-video-en-fond-de-page-web-html5
1 juil. 2012 à 19:58
1 juil. 2012 à 02:08
Ca passe bien sur Safari (selon les codecs et les formats évidemment) mais sur Firefox quel que soit le format, certains (webm ou ogv par ex) passent en test sur mon ordi, c'est en boucle et tout, parfait... mais ça ne marche jamais à partir du serveur... comment on dit ? distant ? Enfin une fois tout transféré sur l'hôte...
Une idée ?
Merci d'avance !
22 juin 2012 à 17:13
22 juin 2012 à 17:08
Je suis en stage avec un dj et je dois lui faire un site web avec une vidéo en fond de page comme ceci: http://quentinmosimann.com
Donc grâce au code du tuto, j'ai réussi, ça marche très bien sous firefox, malheureusement pas sur safari car ils ne supportent pas le même format.
J'ai donc fait les 3 même vidéos en format différent pour qu'elles soient supporté sur tous les navigateur.
Ma question: Comment mettre par code les 3 vidéos en gardant ce code ci?
J'ai essayer de rajouter ce code:
<video>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
</video>
et il marche mais le problème c'est que du coup la vidéo n'est plus en fond de page, en plein écran mais elle se met dans un petit player...
Merci d'avance pour vos réponses!
3 mai 2012 à 22:24
Tous d'abord bien merci pour se partages j'aurais aimez s'avoir si quelqu'un pouvais m'aider sur cette fameuse intégration de video dans le fond
de notre pages HTML 5 (Pour vous dire je suis un jeune Architect designer qui aimerais faire sont site je touche as plusieurs programme d'adobe ( AE-expert,Php-expert,Dreamweaver-debutant,flash-débutant) ausii j'utilise pas mal cinema 4D et autre programme 3D et 2D je gere aussi les composition musical avec logic fin soite enfaite se qu'il me manque c de pouvoir créer mon site pour exposer et vendre mes oeuvres
donc si quelqu'un as un peu de temps a me consacrer j'aimerais s'avoir plusieurs chose :
1) Si je souhaite Avoir une Pages Dynamique
exemple : Un fond avec video et sur cette video j'aimerais placer des boutton Dynamique aussi ainssi que différent formulaire (inscriptions,contact ...)
En gros je parles de Creer un site web Video Donc la video se serai le fond du site avec d'autre interaction du style changer de video lors d'un changement de page
sans coupure et en fondue
Cela est-il possible ? Si Oui , Comment puis-je le réaliser ( j'attend pas un tutoriel entier sur sa mes le langages à utiliser,différent technique qui pourrons m'aider...)
Pour revenir à mes mouton j'ai essaye d'intégrer ma video en .flv dans votre code mes cela ne fonctionne pas si quelqu'un peux m'aider aux niveaux de l'insertion de sa video dans le code se serais gentil :)
A oui si une personne qui si connais dans le domaine peux m'aider je serais prés à lui envoyer un petit dont via paypal merci
Merci et à bientôt
17 avril 2012 à 12:26
13 avril 2012 à 17:37
13 avril 2012 à 13:56
Il faudrait quelques précision sur le navigateur et l'os utilisé (Mac/Win). Cela peut venir d'un plugin du navigateur ou d'un codec du système qui serait absent. Les nouvelles version de Firefox n'aime pas non plus le H.264 qui est utilisé dans le format FLV et est très sensible au format MIME (ex : video/mp4). Mieux vaut utiliser deux formats (ou plus) afin de parer à ce problème. Tu peux essayer le code suivant qui permet de mettre plusieurs format à disposition et laisse le choix au navigateur de décider. Il faut naturellement convenir la vidéo aux formats désirés.
<video width="100%" height="100%" preload="preload" autoplay="autoplay" loop="loop">
<source src="Springtime.mp4" type="video/mp4" />
<source src="Springtime.flv" type="video/x-flv" />
<source src="Springtime.ogv" type="video/ogg" />
Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
</video>
En ce qui concerne le fait que la vidéo ne prennent pas toute la page, c'est malheureusement limité au format (taille) de la vidéo. Pour le moment les navigateur n'arrivent pas à étirer la vidéo sur la page. Cela sera peut-être possible dans des futurs versions des navigateurs.
6 avril 2012 à 15:19
vous précisez que les formats OGG/OGM/OGV (.ogg,.ogv), MP4 (.mp4), FLV (.flv), AVI (.avi), peuvent être utilisés. ça ne fonctionne pas avec "monfichier.flv".
"
<video id="vidfond" src="monfichier.flv" preload="preload" autoplay="autoplay" loop="loop" onended="loopVideo()"></video>
"
d'autre par, en testant votre code tel que, votre video ne s'affiche en fond que sur une partie de ma page.
merci
15 nov. 2010 à 15:14
En principe tout ce que l'HTML5 et la balise <video> prennent en compte sont supportés.
Un peu plus d'info :
http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html
http://www.xul.fr/html5/video.php
14 nov. 2010 à 12:29
//screen//
des truk comme sa ???
3 août 2010 à 20:28
Je vais voir pour FireFox sur Mac car il n'y a pas de raison que cela ne fonctionne pas...
2 août 2010 à 20:31
2 août 2010 à 18:56
30 juil. 2010 à 15:04
30 juil. 2010 à 14:29
this.play()
30 juil. 2010 à 10:52
Simplement :
<script type="text/javascript">
function getWindowSize(){
if (document.body)
{
var larg = (document.body.clientWidth);
var haut = (document.body.clientHeight);
}
else
{
var larg = (window.innerWidth);
var haut = (window.innerHeight);
}
var video=document.getElementById('vidfond');
video.style.height=haut;
video.style.width=larg;
alert(haut+" - "+larg);
}
</script>
Afin de récupérer la taille de la fenêtre de l'utilisateur et de redimensionner la vidéo en conséquence. Cependant étant donnée que les proportions de la vidéo sont toujours conservée, cela n'apporte pas grand chose, et le CSS le fait très bien aussi.
Mais j'avoue que je n'ai pas trouvé de "zone" qui correspondait à mon code... je me suis dis que le plus proche était celui-ci...
30 juil. 2010 à 10:45
29 juil. 2010 à 21:52