Insérer une vidéo dans un site avec Dreamweaver

Insérer le code d'une vidéo YouTube dans une page de site

Ajouter une vidéo .flv avec Dreamweaver

Une vidéo Flash (.flv) peut être insérée dans une page web en utilisant Dreamweaver.

Il y a deux options pour que l'utilisateur final visionne une vidéo sur un site (sans parler des vidéos en provenance des sites comme YouTube ou Dailymotion): sous pouvez soit proposer le téléchargement progressif du fichier vidéo sur l'ordinateur du visiteur pour la lire, ou vous pouvez la diffuser à l'ordinateur du visiteur en mémoire tampon: flux continu (streaming).

Veuillez noter que vous devez au préalable enregistrer votre vidéo en .flv et la transférer sur votre espace d'hébergement web.

Pour insérer la vidéo Flash nous pourrons utiliser le panneau Insertion nouveau, mais nous allons utiliser une approche alternative pour le moment. Sélectionnez le menu Insertion, puis survolez les médias pour voir le menu déroulant.

Sélectionnez FLV ... et la boîte de dialogue Insérer FLV apparaît.

Maintenant c'est le moment de préciser si le type de vidéo soit en téléchargement progressif ou vidéo en flux continu. A cette occasion, je choisis la première: Vidéo en téléchargement progressif.

(Si vous sélectionnez vidéo en flux continu, vous devez spécifier le nom du serveur de streaming pour la vidéo, et autres informations relatives à la façon dont le streaming sera mis en place. Assurez-vous que vous savez ce avant d'essayer de mettre en place le streaming vidéo sur votre site Web.)

Ensuite, je place l'URL de ma vidéo en naviguant dans mon site au dossier local. Notez que le fichier FLV pourrait ne pas être réellement dans ma structure de dossier de site du tout. Si ce n'est pas, Dreamweaver propose de le copier là pour moi.

Puis-je choisir à partir d'un certain nombre de skins/templates apparence du lecteur:

Ce sont, en effet, le joueur contrôle pour la vidéo.

Maintenant, j'utilise' le bouton Détecter la taille pour indiquer à Dreamweaver pour déterminer la taille de la vidéo. Sinon, je peux spécifier la hauteur et la largeur et indiquer à Dreamweaver pour contraindre la vidéo à cette taille.

Enfin, je peux choisir de sélectionner la lecture automatique et les options de Rbombinage.

Voici la boîte de dialogue terminée.

Appuyez sur OK et la vidéo est en position.

Maintenant, je réduire la taille de la vidéo de 50% et ma mise en page terminée ressemble à ceci:

Ici, vous ne pouvez pas tester la vidéo FLV localement (comme vous pouvez faire avec une vidéo SWF). Vous devrez attendre jusqu'à ce qu'elle soit sur le serveur distant.

Insérer le code d'une vidéo depuis YouTube ou DailyMotion

Rien de compliqué!

Vous irez au site YouTube ou DailyMotion, vous choisissez votre vidéo à insérer sur votre site puis vous cliquez sur Partager:

Ensuite, si vous voulez faire jouer la vidéo sur votre site directement, cliquez sur: Intégrer et vous aurez les options d'intégration avant d'obtenir le code:

- Afficher les suggestions de vidéos à la fin de la lecture: si vous voulez que vos visiteurs regardent d'autres vidéos en relation avec celle que vous avez intégrée au site.

- Utiliser HTTPS: si vous utilisez un serveur sécurisé avec une connexion HTTPS pour ne pas générer des messages d'erreur dans le navigateur.

- Activer le mode de confidentialité avancée: pour empêcher YouTube de placer des cookies sur l'ordinateur de l'utilisateur qui ne clique pas sur Lire.

- Utiliser l'ancien code d'intégration: Il existe deux styles de codes d'intégration pour les vidéos YouTube. Le nouveau code d'intégration commence par "<iframe..." et permet de lire les vidéos Flash et HTML5. L'ancien code commence par "<object..." et permet uniquement de lire les vidéos Flash.

Spécifier les dimensions du lecteur selon la taille de votre page web: 420x315 pour un petit lecteur, 480x360 pour un lecteur moyen ou encore des lecteurs de grandes tailles: 640x480 et 960x720. Vous pouvez encore spécifier une taille personnalisée.

Après avoir sélectionnée les options d'intégration, copiez-collez le code d'intégration dans l'endroit de votre page où vous voulez que la vidéo apparaisse:

un exemple:

Voici le code copié:

<iframe width="480" height="360" src="http://www.youtube-nocookie.com/embed/M8mSahYu0hw" frameborder="0" allowfullscreen></iframe>

On devra le coller dans la partie Code du site:

 Et voici le résultat: