begin process at 2012 02 05 22:24:55
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > VIDEO EN FOND DE PAGE WEB (HTML5)

VIDEO EN FOND DE PAGE WEB (HTML5)


 Information sur la source

Note :
4,5 / 10 - par 2 personnes
4,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :video, fond, html5, fond video, page web Niveau :Débutant Date de création :29/07/2010 Date de mise à jour :30/07/2010 15:03:22 Vu / téléchargé :7 103 / 801

Auteur : BarbuJack

Ecrire un message privé
Commentaire sur cette source (15)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Ce petit code permet d'afficher une vidéo dans une div en fond de page en utilisant la balise HTML5 <video> et l'attribut CSS "z-index".

On peut utiliser les formats suivants pour les vidéos :

OGG/OGM/OGV (.ogg,.ogv)
MP4 (.mp4)
FLV (.flv)
AVI (.avi)

Source

  • <html>
  • <head>
  • <title>Video fond de page</title>
  • <style>
  • html body{
  • width:100%;
  • height:100%;
  • }
  • #fond{
  • position:absolute;
  • left:0px;
  • top:0px;
  • width:100%;
  • height:100%;
  • z-index:-1;
  • overflow:hidden;
  • }
  • #vidfond {
  • left: 0px;
  • top: 0px;
  • margin:0px;
  • padding:0px;
  • width:100%;
  • height:100%;
  • }
  • </style>
  • <script type="text/javascript">
  • function loopVideo(){
  • var video=document.getElementById('vidfond');
  • video.play();
  • }
  • </script>
  • </head>
  • <body>
  • <div id="fond">
  • <video id="vidfond" src="Springtime.ogv" preload="preload" autoplay="autoplay" loop="loop" onended="loopVideo()"></video>
  • </div>
  • <h1>Ceci est du contenu</h1>
  • <h2>Ceci est du contenu</h2>
  • <h3>Ceci est du contenu</h3>
  • <ul>
  • <li>Element de liste</li>
  • <li>Element de liste</li>
  • <li>Element de liste</li>
  • <li>Element de liste</li>
  • <li>Element de liste</li>
  • <li>Element de liste</li>
  • <li>Element de liste</li>
  • <li>Element de liste</li>
  • <li>Element de liste</li>
  • <li>Element de liste</li>
  • <li>Element de liste</li>
  • <li>Element de liste</li>
  • </ul>
  • </body>
  • </html>
<html>
<head>
<title>Video fond de page</title>
<style>
html body{
width:100%;
height:100%;
}
#fond{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:-1;
overflow:hidden;
}
#vidfond {
	left: 0px;
	top: 0px;
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
}
</style>
<script type="text/javascript">
function loopVideo(){
var video=document.getElementById('vidfond');
video.play();
}
</script>
</head>
<body>

<div id="fond">
<video id="vidfond" src="Springtime.ogv" preload="preload" autoplay="autoplay" loop="loop" onended="loopVideo()"></video>
</div>

<h1>Ceci est du contenu</h1>
<h2>Ceci est du contenu</h2>
<h3>Ceci est du contenu</h3>
<ul>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
</ul>
</body>
</html>

 Conclusion

On ne peut malheureusement pas modifier les proportions de la vidéo pour qu'elle s'adapte à la fenêtre.
L'attribut : "loop" ne fonctionne apparemment pas sur Gecko(FireFox), mais fonctionne sur WebKit(Safari, Chrome)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

30 juillet 2010 15:03:24 :
Ajout de la fonction de boucle (loppVideo) proposée par Kazma

 Sources de la même categorie

Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture PETIT LECTEUR AUDIO HTML 5 par maichafred
Source avec Zip PLAYER VIDEO HTML À BONDER par Hakumbaya
Source avec Zip PSEUDO CLASS JAVASCRIPT PERMET LE STORAGE(HTML5) D'UN TABLEA... par Magelo
Source avec Zip Source avec une capture ACTIONJS - FRAMEWORK JAVASCRIPT (HTML5 CANVAS) par Neoziro

Commentaires et avis

Commentaire de Flachy Joe le 29/07/2010 21:52:31

Mvoui, mais où est le javascript là dedans ???

Commentaire de neteraser le 30/07/2010 10:45:15

super avec un .flv en fond de page ça donne un peu de vie a une page un peu tristounette... mais ????? où est le javascript ?????

Commentaire de BarbuJack le 30/07/2010 10:52:52

Il fût un temps ou il y en avait effectivement... mais je l'ai enlevé car je l'ai jugé inutile.

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>

<body onload="getWindowSize()">

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...

Commentaire de kazma le 30/07/2010 14:29:27 administrateur CS

tu doir pouvoir simuler l'attribut loop en associant l'evenement onended a une fonction


this.play()

Commentaire de BarbuJack le 30/07/2010 15:04:14

Très bonne idée kazma ! Je n'y avais même pas pensé...(--> honte). Voilà c'est ajouté.

Commentaire de tigi83 le 02/08/2010 18:56:05

OK Trés bien sous firefox,Mais ne fonctionne pas avec Internet Explorer 8 ...

Commentaire de neteraser le 02/08/2010 20:31:38

ne fonctionne pas sur Firefox en Mac ... mais impec sur Safari .... en version 10.6 bien sur ...

Commentaire de BarbuJack le 03/08/2010 20:28:28

Pour IE 8, c'est normal, il ne supporte pas l'HTML5, il faudra attendre IE9.
Je vais voir pour FireFox sur Mac car il n'y a pas de raison que cela ne fonctionne pas...

Commentaire de djius le 14/11/2010 12:29:34 8/10

esque sa suporte le stream du style :
//screen//
des truk comme sa ???

Commentaire de BarbuJack le 15/11/2010 15:14:01

Je ne comprends pas trop la question.

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

Commentaire de nossoctoruss le 30/12/2010 04:12:22 1/10

marche pas 1/10 parce que je peu pa mettre zero

Commentaire de BarbuJack le 30/12/2010 11:45:37

Boulet, c'est normal si tu utilise IE8 ! C'est du HTML 5, c'est pas supporté par IE 8.

Vraiment nul comme commentaire !

Commentaire de nossoctoruss le 30/12/2010 20:56:15

va te fai*e fout*e!tu croi que je l'avai pa remarque,alors t*,t'est vraiment soulant comme boulet toi,tu peu parler,mais dans le genre troll,toi aussi t'est pas mal,la libertée d'expression ca existe...et pour ta gouverne,il y a plein de script sencés n'etre supportés que sur une ancienne version de ie mais qui marchent quand meme sur un autre browser,ou sur une nouvelle version de ie8 donc arrete de me souler,la j'ai pas le temp pour paler avec des gens comme toi...he oui,cette foi j'en ai marre des gens comme toi,alors oui,la je suis grossier et je m'enerve pour une foi!

Commentaire de BarbuJack le 30/12/2010 21:29:53

Désolé d'avoir réagis à un commentaire que je trouve inapproprié parce qu'il est clairement indiqué que le script est basé sur du HTML5 qui est supporté par Gecko et Webkit mais pas sur l'ancien moteur d'IE. IE 9 supporte l'HTML 5 mais je l'ai pas testé.

Pour le reste no comment.


Commentaire de nossoctoruss le 30/12/2010 21:47:43

excuse moi ct pa le moment...

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

image background et redimensionnement [ par evilfrog83 ] Comment puis-je faire pour qu'une image positionnée en temps que fond d'un tableau puisse s'agrandir et se rétrécir en fonction de la taille de celui- COULEUR DE FOND [ par PatriceVB ] Est-il possible quand on clique sur un lien, de changer la couleur de fond de la page ? couleur du texte d'une cellule ou la couleur du fond d'une cellule d'une table [ par rabdane ] J'aimerais avoir un javascript qui change la couleur du texte d'une cellule ou la couleur du fond d'une cellule d'une table appelé TABLE1.cette table Image centrée en fond de tableau... [ par orelien ] Bonjour,J'aimerais placer une image en fond d'un tableau mais centrée...Merci.Orélien. Je need un fond de page web qui reste statique... [ par nef ] defilement d'un fond [ par kinooo ] défilement du fond [ par kinooo ] J'ai récupérer un script pr le défilement du fond. Est ce que qq'un serait ce qui ne va pas car je ne voit pas ou auraut un autre script.SCRIPT:&lt;ht Inserrer une video WMP dasn une page [ par geilgestorm ] Bonjour,J'ai une vidéo à mettre sur un site. La vidéo est encodée en WMP 9 (parce que meilleure qualité pour la taille inférieure à Real) Actuellement Image de fond non duplicable [ par GLTRADE ] Bonjours à tou(te)s, je rencontre un problème avec un fond d'écran pour ma page web. Mon client voudrait que l'image de fond ne se duplique pas (et ce changer limage de fond d'un tableau [ par lumesh ] Salut,Bon oila, je suis a la recherche de la maniere pour modifier limage de fond d'une cellule d'un tableau avec javascript lors d'un rollover su cel


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,905 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales