begin process at 2010 09 04 01:37:27
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > VIDEO EN FOND DE PAGE WEB (HTML5)

VIDEO EN FOND DE PAGE WEB (HTML5)


 Information sur la source

Note :
Aucune note
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é :2 226 / 359
Auteur : BarbuJack

Ecrire un message privé
Commentaire sur cette source (8)
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 EFFET DE TEXTE EN CSS3 par kazma
Source avec Zip Source avec une capture TRANSFORMATIONS CSS ANIMÉES CROSS-BROWSER AVEC JQUERY par pysco68
Source avec Zip Source avec une capture DE L'OMBRE par kazma
INFO BULLE NON DESTRUCTIVE par McPeter
Source avec Zip UN SON AU PASSAGE DE LA SOURIS par Damocles67
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec une capture CHARGER UNE PAGE WEB DANS UN DIV par flk974
Source avec Zip Source avec une capture DRAG DROP DE VIDEOS par kazma
Source avec Zip VIDÉOS FLASH : L'AUTOPLAY FAIT RIEN QU'À M'EMBEDER par cornofulgur

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

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

 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

Septembre 2010
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
27282930   

Consulter la suite du CalendriCode
 
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,562 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)