Les tableaux Tableau plus complexe Les images Visionneuse d'image Nuage de mots clefs Diaporama d'image Insérer une vidéo.
Insérer une vidéo.
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
| Résumé de la matière | Description |
|---|---|
| Une vidéo. | Des sites comme Youtube ou Dailymotion proposent d'inclure des vidéos... |
| Lecteur vidéo. | Si vous ne désirez pas diffuser votre vidéo sur des sites spécialiser... |
Insérer une vidéo.
Des sites comme Youtube ou Dailymotion nous proposent d'inclure des vidéos sur nos propres sites. Sachez cependant que leurs codes sont erronés et ne passe pas la validation W3C. La plupart des gens font une copie du code sans savoir que la balise propriétaire « embed » n'existe pas en XHTML.
Insérer une vidéo.
Dans un premier temps, copier le code ci-après à l'endroit où vous voulez insérer la vidéo.
Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).
1
2
3
4
5
6
|
<div class="video">
<object type="application/x-shockwave-flash" data="Coller l'adresse ici" width="XXX" height="XXX">
<param name="movie" value="Coller la même adresse ici" />
<param name="allowFullScreen" value="true" />
</object>
</div>
|
Rendez-vous maintenant sur le site de Youtube ou Dailymotion et choisissez la vidéo que vous voulez. Dans la fenêtre de droit il y a « Intégrer une vidéo sur votre site », copier l'adresse et coller là n’importe où, mais pas dans la division vidéo que nous venons de créer. Nous n'avons besoin que de quelques éléments de l'adresse.
À droite de « value » il y a une adresse débutant par http://www.youtube.com etc. .... Remplacer Coller l'adresse ici et Coller la même adresse ici de notre modèle par cette adresse de la vidéo sans les guillemets c'est important.
Au début de l'adresse de la vidéo, il y a width et height copier ses valeurs pour remplacer les XXX de width et height de notre modèle.
Il devrait avoir dans l'adresse de la vidéo ce symbole &. Remplacer les toutes par son entité HTML, & et le tour est joué.
Résultat attendu :
Malgré le fait qu'il y a cette vidéo prise sur Youtube, ma page est valide W3C.
 |
Il arrive qu'un lien vers un site extérieur comporte des caractères spéciaux et il se peut que la validation W3C ne passe pas, dans ce cas, changé ses caractères spéciaux par son entité HTML correspondant. Pour les trouver faite un petit tour sur la page Entité HTML et caractères spéciaux. |
|---|
Lecteur vidéo sur votre site.
Si vous ne désirez pas diffuser votre vidéo sur des sites spécialisés comme Youtube ou Dailymotion, vous aurez besoin d'un lecteur vidéo sur votre site. Celui que je vous propose est un lecteur vidéo très près de celui fournis par Youtube qui a besoin d'un fichier texte pour déterminer les options de lecture.
Ce que j'aime le plus est que la vidéo, le lecteur ainsi que le fichier texte est dans un dossier séparé, ce qui ne surcharge pas la racine de votre site. Idéalement, il ne devrait pas avoir autre chose que les pages web dans la racine du site. Le CSS, les calques, les scripts, les vidéos etc. devraient tous être dans des dossiers.
Résultat attendu :
Copier ce qui suit n'importe où sur la page où vous désirez insérer la vidéo puis décompresser l'archive Winrar dans la racine de votre site. Cette archive comprend un dossier video dans lequel il y a la même vidéo que l'exemple, le fichier texte ainsi que le lecteur. En copiant ce qui suit, la vidéo fonctionne sans autre procédure.
Télécharger (7,55 mo.)
1
2
3
4
5
6
7
8
|
<div class="video">
<object type="application/x-shockwave-flash" data="video/flvplayer.swf" width="492" height="268">
<param name="movie" value="video/flvplayer.swf" />
<param name="flashvars" value="config=video/config_nomb.txt" />
<param name="wmode" value="transparent" />
<param name="menu" value="true" />
</object>
</div>
|
Configuration.
Le texte surligner indique le chemin de la vidéo du fichier texte et du lecteur. Sur les lignes 2 et 3 vous avez le chemin du lecteur et sur la ligne 4 vous avez le chemin pour le fichier texte.
Le fichier texte.
- flv=numb.flv (le nom de la vidéo).
- title=Linkin Park - Numb (le titre de la vidéo).
- width=488 (la largeur de la vidéo).
- height=268 (la hauteur de la vidéo).
- margin=0 (les marges autour de la vidéo).
- showstop=1 (affiche le bouton stop).
- showvolume=1 (affiche le bouton du volume).
- autoload=1 (télécharge la vidéo automatiquement).
- autoplay=0 (La vidéo ne démarre pas automatiquement).
Sur la ligne 1 vous avez le nom de la vidéo et la possibilité d'insérer un titre sur la ligne 2. Il y a la fonction autoplay que je vous suggère de laisser à zéro.
Si vous voulez insérer plusieurs vidéos sur la même page, copier la procédure plus haut le nombre de fois que vous voulez. Cela fait, insérer les nouvelles vidéos dans le même dossier video. Copier le fichier texte et changer son nom pour celui de la nouvelle vidéo. Dans ce fichier texte changer numb.flv (ligne 1) par le nom de la nouvelle vidéo (pas d'accent ni d'espace).
Ajouter ce site à vos favoris
