Tutorial : Une intro vidéo pour un site

Par smashit le Vendredi 02 Avril 2010 à 07h06, web, tutoriaux

Tutorial : Une intro vidéo pour un site
Si vous souhaitez avoir une vidéo qui s'affiche sur la page d'acceuil de votre site web pour une introduction par exemple, ce tutorial est fait pour vous.
Ce tuto se base sur les cookies et le javascript pour afficher la vidéo seulement à la première visite du site web.

Les cookies


Si nous voulons que la vidéo s'affiche seulement la première fois que le visiteur se connecte au site, il faut se servir des cookies.
Qu'est ce qu'un cookie?
Un cookie est un petit fichier texte enregistré dans votre browser, et qui contient les informations suivantes :
  • Une paire nom-valeur qui contient l'information
  • Une date d'expiration après laquelle l'information n'est plus valide
  • Le domaine et le chemin du serveur à qui les informations seront envoyées

Dès que vous visitez une page d'un serveur à qui vous envoyez un cookie, ce dernier est ajouté au header HTTP. On peut ensuite lire ces cookies pour afficher ou non certaines choses sur une page, collecter des informations sur l'utilisateur et ainsi de suite.
C'est ici la première option qui nous intéresse. Pour ce faire nous allons commencer par créer le cookie à l'aide de la fonction suivante que nous détaillerons un peu plus bas.



function createCookie(name,value,days) {

	if (days) {

		var date = new Date();

		date.setTime(date.getTime()+(days*24*60*60*1000));

		var expires = "; expires="+date.toGMTString();

	}

	else var expires = "";

	document.cookie = name+"="+value+expires+"; path=/";

}


La fonction createCookie prend trois paramètres en compte, le nom du cookie, sa valeur, et sa date d'expiration. Si cette date est égale à 0 le cookie est supprimé quand le visiteur ferme la fenêtre de son navigateur, un chiffre négatif le supprime immédiatement.

On test d'abord si la variable days a été renseigné, si oui on créé un nouveau objet Date qui contient la date actuelle, et à qui on rajoute le nombre de jours spécifiés dans le paramètre de la fonction.

On initialise ensuite la variable expires au format cookie. Si days est égale à 0 alors la variable expires n'est pas initialisée. Pour finir on écrit le nouveau cookie à l'aide de document.cookie.

Une fois créé le cookie servira à être lu, et ainsi faire des opérations selon les informations du cookie. Voici la fonction readCookie.



function readCookie(name) {

	var nameEQ = name + "=";

	var ca = document.cookie.split(';');

	for(var i=0;i < ca.length;i++) {

		var c = ca[i];

		while (c.charAt(0)==' ') c = c.substring(1,c.length);

		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

	}

	return null;

}


Tout d'abord on va splitter document.cookie pour obtenir un tableau de tous les cookies, que l'on va ensuite lire à l'aide d'une boucle.
On clean ensuite la variable pour qu'elle ne commence pas par un espace. Si la variable c, est égale à nameEQ alors le cookie existe et on retourne sa valeur.

Dernière fonction javascript pour les cookies, la fonction pour le supprimer, inutile dans notre cas, sauf si vous voulez que l'utilisateur relise la vidéo quand il accomplie une certaine action.



function eraseCookie(name) {

	createCookie(name,"",-1);

}


On passe tout simplement un chiffre négatif comme date d'expiration, et le cookie se verra supprimé.

Le javacript



On en a presque fini avec le javascript. Pour que la vidéo ressorte bien, on se servira d'un masque semi-opaque, qu'il faudra supprimer une fois la vidéo terminé, ainsi que le lien d'accès au site. Pour ce faire on a besoin de la fonction suivante : 



function hideit() {

	document.getElementById('mask').style.display = 'none';

	document.getElementById('flashWrapper').style.display = 'none';

}


On assigne tout simplement aux deux conteneurs la propriété css display, qu'on change à none. Ainsi les deux éléments seront invisibles.

Le hmtl et le php



Passons maintenant au html, dont le code est ci-dessous. N'oubliez pas d'importer votre feuille de style, et votre fichier javascipt.







<body>

<?php if(!isset($_COOKIE['flashit'])) { ?>




    

<?php } ?>


La vidéo ne s'affichera plus à moins de supprimer les cookies via les options du navigateur.


Rien de compliqué ici non plus, on vérifie qu'il existe un cookie du nom de flashit, si non, on affiche la vidéo, le masque et le lien d'accès au site. Sur ce lien on assigne la fonction hideit quand l'utilisateur clique sur le lien pour cacher la vidéo et le masque.
Enfin on vérifie en javascript si le cookie existe, si non, on le créé.

Le css



Il ne reste plus qu'à ajouter la feuille de style, dont le code suit...



body {

	background-color:red;	

	margin:0;

}



#flashWrapper {

	left:50%;

	margin-left:-225px;

	background-color:#000;

	position:absolute;

	height:300px;

	top:100px;

	width:450px;

}



#conteneur {

	width:900px;

	position:absolute;

	width:780px;

	left:50%;

	margin-left:-390px;

}



#conteneur p {

	margin:100px auto;

	width:450px;

	text-align:center;

	height:300px;

	color:white;

	background:black;

}



#mask {

	position: fixed;

	z-index: 10000;

	width: 100%;

	height: 100%;

	background: #000;

	opacity: 0.5;

	filter: alpha(opacity = 50);

}





#close-link {

	width:450px;

	text-align:center;

	padding:5px 0;

	background-color:#000;

	position:absolute;

	top:300px;

	z-index:100000;

}



#close-link a {

	color:#fff;

}


Rien d'original ici, ci ce n'est l'astuce pour centrer un élément positionné en absolu et le filtre d'opacité pour IE qui n'est pas réactif à la propriété opacity.

Pour voir une démo du tutorial veuillez suivre ce lien : démo tutorial vidéo d'introduction

Ajouter un commentaire