Franc83

Prototype Windows class

22-09-2008

Videos avec le prototype window class

Prototype Window Class est une classe JavaScript pour la librairie prototype.js. Cette classe permet de gérer plusieurs fenêtre.

Voici comment présenter des vidéos dans votre site de façon originale, avec le prototype js window class :

Boum	Les potes
Brulant	Champion

Fichiers et codes à préparer pour les vidéos :

Télécharger le zip :

- Il vous faut les fichiers du prototype js, c'est à dire le prototype.js, l'effects.js, et le windows.js. Pour la mise en forme, vous aurez besoin de default.css et du css de la fenêtre que vous allez utiliser, dans notre cas, le mac_os_x.css

- Il faut ensuite préparer la mise en place de la mise en forme des fenêtres et de l'appel par variables des différents wmv que vous appellerez. Voici le script de base, que vous pouvez modifier si vous changez de style de fenêtres.

win.getContent().innerHTML= '<div style="padding:10px"><object width="400" height="400" type="application/x-mplayer2"><param name="fileName" value="' + video_id + '"><param name="autostart" value="0"><param name="ShowStatusBar" value="1"><param name="volume" value="1"></object></div>';

win.showCenter();
}
</script>

- dialog : C'est le style de la Fenêtre que vous utiliserez pour votre fenetre

- Media Player : C'est le titre que vous donnez à votre fenêtre

- type="application/x-mplayer2" : C'est l'application qui servira à exécuter le média, on peut avoir aussi des média flash à jouer et donc entrer les valeurs correspondantes.

- value="' + video_id + '" : C'est la variable qui servira à remplacer dans chaque appel le nom du fichier média à jouer, s'il est dans le même répertoire que le ficier html, sinon, il faut mettre le chemin réel du fichier, relatif s'il est sur le même serveur, absolu s'il est sur un autre serveur.

Codes dans la page html pour lancer les fichiers:

- javascript:openVideo : Appel de la fonction de l'ouverture de la fenêtre et de son contenu

- chutes.wmv: Nom du média qui prendra la valeur de la variable video_id

- 'javascript:openVideo("chutes.wmv");' : Javascript qui servira de lien de lancement par un lien texte, de la vidéo.

Vous pouvez ajouter des vidéos à volonté, présenter sous forme de tableau comme dans le cas présent. Il est très important de bien vérifier dans le codes les signes suivant ' et ", ils ne sont pas anodins, le ' (apostrophe) encadre des variables dans des chaînes de caractères javascript, les " (guillemets), servent à encadrer des valeurs de propriétés de balises html, ou des données entre les ' (apostrophes) de fonctions javascript. Soyez prudents,et précis dans votre code, même en copier coller.

Citez cet article

Commentaires (2)

1. pute
Ecrit par salopê , le 10-06-2009 14:47
:zzz

2. Ecrit par gcn, le 17-03-2010 15:43
:zzz

Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés. Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur. Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire
Code:*
	Je désire être prévenu par mail des commentaires qui suivront