Sélectionnez Insérer > HTML > Vidéo Flash.
Dernière mise à jour le
25 sept. 2023
Découvrez comment incorporer des vidéos dans des pages web et insérer des fichiers FLV dans Dreamweaver.
Incorporation de vidéos aux pages web (HTML5)
HTML5 prend en charge les balises audio et vidéo, permettant aux utilisateurs de lire des fichier audio et vidéo dans un navigateur sans complément ni lecteur externe. Dreamweaver prend en charge les conseils de code permettant l’ajout de balises vidéo et audio.
Le mode En direct affiche la vidéo, de façon à prévisualiser la vidéo que vous incorporez à la page web.
Annotation
Bien que vous puissiez incorporer toute vidéo à votre page web, le mode En direct ne les affiche pas toujours toutes. Les balises audio et vidéo sont prises en charge par Dreamweaver au moyen du module QuickTime d’Apple. Sous Windows, si le module QuickTime d’Apple n’est pas installé, la page web n’affiche pas le contenu multimédia.
Pour savoir comment insérer une vidéo HTML5, consultez la section Insertion de vidéos HTML5 dans Dreamweaver.
Insertion de fichiers FLV
Insertion de fichiers FLV
Vous pouvez facilement ajouter une vidéo FLV à vos pages web sans utiliser l'outil de création Flash.Vous devez disposer d’un fichier FLV codé avant de commencer.
Dreamweaver insère un composant SWF qui affiche le fichier FLV ; lorsqu'il est affiché dans un navigateur, ce composant affiche le fichier FLV sélectionné, ainsi qu'un ensemble de contrôles de lecture.
Dreamweaver vous propose les options suivantes pour diffuser une vidéo FLV aux visiteurs de votre site :
Vidéo en téléchargement progressif
Télécharge le fichier FLV sur le disque dur du visiteur de site et le lit ensuite. Contrairement aux méthodes traditionnelles de diffusion vidéo « télécharger et lire », cependant, le téléchargement progressif permet au fichier vidéo de commencer à être lu avant que le téléchargement ne soit terminé.
Vidéo en flux continu
Diffuse en continu le contenu vidéo et le lit sur une page web après une courte période de mise en mémoire tampon, ce qui assure une lecture homogène. Pour activer la diffusion vidéo en continu sur vos pages web, vous devez avoir accès à Adobe® Flash® Media Server.
Vous devez disposer d’un fichier FLV codé avant d’utiliser ce dernier sous Dreamweaver. Vous pouvez insérer les fichiers vidéo créés avec deux types de codecs (technologies de compression/décompression) : Sorenson Squeeze et On2.
Lorsque vous insérez un fichier FLV, tout comme dans le cas d’un fichier SDF ordinaire, Dreamweaver insère du code qui détecte si l’utilisateur dispose d’une version appropriée de Flash Player pour voir la vidéo. Si ce n’est pas le cas, la page affiche un contenu alternatif qui invite l’utilisateur à télécharger la version la plus récente de Flash Player.
Annotation
Pour pouvoir visualiser un fichier FLV, Flash Player en version 8 ou ultérieure doit être installé sur l’ordinateur de l’utilisateur. Si l’utilisateur ne dispose pas de la version requise de Flash Player, mais bien de Flash Player en version 6.0 r65 ou une version ultérieure, le navigateur affiche un programme d’installation express de Flash Player au lieu du contenu alternatif. Si l’utilisateur refuse l’installation express, la page affiche le contenu alternatif.
Pour plus d’informations sur l’utilisation de la vidéo, consultez l’adresse www.adobe.com/go/flv_devcenter_fr.
Insertion d’un fichier FLV
Dans la boîte de dialogue Insérer un fichier FLV, sélectionnez Téléchargement progressif
ou Vidéo en flux continu dans le menu pop-up Type de vidéo.
Complétez les autres options de la boîte de dialogue et cliquez sur
OK.
Annotation
Microsoft Internet Information Server (IIS) ne traite pas les balises d'objet imbriquées.Pour les pages ASP, Dreamweaver utilise du code objet/intégré imbriqué au lieu du code d'objet imbriqué lors de l'insertion de fichiers SWF ou FLV.
Options de vidéo en téléchargement progressif
La boîte de dialogue Insérer un fichier FLV vous permet de définir des options pour la diffusion en téléchargement progressif d'un fichier FLV inséré dans une page web.
Choisissez Insérer > HTML > Vidéo Flash (ou cliquez sur l’icône Vidéo Flash de la catégorie HTML du panneau Insertion).
Dans la boîte de dialogue Insérer un fichier FLV, sélectionnez Vidéo
en téléchargement progressif dans le menu Type de vidéo.
Définissez les options suivantes :
URL
Spécifie le chemin absolu ou relatif du fichier FLV. Pour spécifier un chemin d'accès relatif (par exemple, monchemin/mavideo.flv), cliquez sur le bouton Parcourir, naviguez jusqu'au fichier FLV et sélectionnez-le. Pour spécifier un chemin d'accès absolu, saisissez l'URL (par exemple, http://www.example.com/myvideo.flv) du fichier FLV.
Enveloppe
Définit l’aspect du composant vidéo. Un aperçu de l'habillage sélectionné apparaît sous le menu pop-up Habillage.
Largeur
La largeur (en pixels) du fichier FLV. Dreamweaver détermine la largeur du fichier FLV et vous pouvez voir la largeur apparaître automatiquement dans ce champ.
Hauteur
La hauteur (en pixels) du fichier FLV. Dreamweaver optimise automatiquement la hauteur du fichier FLV et vous pouvez voir la hauteur apparaître automatiquement dans ce champ.
Annotation
Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l’enveloppe sélectionnée.
Respecter les proportions
Maintient le même rapport L/H entre la largeur et la hauteur du composant vidéo. Cette option est sélectionnée par défaut.
Lecture automatique
Spécifie s'il faut lire la vidéo lorsque la page web est ouverte.
Rembobinage automatique
Spécifie si le contrôle de lecture revient à la position de départ une fois la lecture de la vidéo terminée.
Cliquez sur OK pour fermer la boîte de dialogue et ajouter le fichier FLV à votre page web.
La commande Insérer un fichier FLV génère un fichier SWF de lecteur vidéo et un fichier SWF d'habillage qui sont utilisés pour afficher votre Contenu Vidéo sur une page web. (Pour voir les nouveaux fichiers, vous devrez peut-être cliquer sur le bouton Actualiser dans le panneau Fichiers.) Ces fichiers sont stockés dans le même répertoire que le fichier HTML auquel vous ajoutez du contenu vidéo. Lorsque vous chargez la page HTML contenant le fichier FLV, Dreamweaver charge ces fichiers comme fichiers dépendants (tant que vous cliquez sur Oui dans la boîte de dialogue Placer les fichiers dépendants).
Définition des options pour la vidéo en flux continu
La boîte de dialogue Insérer un fichier FLV vous permet de définir des options pour le téléchargement de vidéo en flux continu d'un fichier FLV inséré dans une page web.
Choisissez Insérer > HTML > Vidéo Flash (ou cliquez sur l’icône Vidéo Flash de la catégorie HTML du panneau Insertion).
Activez l’option Vidéo en flux continu dans le menu contextuel Type de vidéo.
URI du serveur
Spécifie le nom du Serveur, le nom de l'Application et le nom de l'Instance sous la forme rtmp://www.exemple.com/nom_app/nom_instance.
Nom du flux
Spécifie le nom du fichier FLV que vous souhaitez lire (par exemple, mavideo.flv). L’extension .flv est facultative.
Enveloppe
Définit l’aspect du composant vidéo. Un aperçu de l'habillage sélectionné apparaît sous le menu contextuel Habillage.
Largeur
La largeur (en pixels) du fichier FLV. Dreamweaver détermine la largeur du fichier FLV et renseigne automatiquement celle-ci dans ce champ.
Hauteur
La hauteur (en pixels) du fichier FLV. Dreamweaver détermine la hauteur du fichier FLV et renseigne automatiquement celle-ci dans ce champ.
Annotation
Total avec enveloppe indique la largeur et la hauteur du fichier FLV plus la largeur et la hauteur de l’enveloppe sélectionnée.
Respecter les proportions
Préserve le rapport hauteur/largeur du composant vidéo. Cette option est sélectionnée par défaut.
Vidéo en temps réel
Indique si le contenu vidéo est en temps réel ou non. Si vous sélectionnez Vidéo en temps réel, Flash Player diffuse en continu un flux vidéo provenant de Flash® Media Server. Le nom de la vidéo en temps réel est le nom indiqué dans la zone Nom du flux.
Annotation
Pour activer la diffusion vidéo en temps réel, vous devez sélectionner l’une des options d’habillage Halo du champ Enveloppe. Si vous activez l’option Vidéo en temps réel, seul le contrôle de volume apparaît sur l’enveloppe du composant, car il est impossible d’intervenir sur de la vidéo en temps réel. De plus, les options Lecture automatique et Rembobinage automatique sont sans effet.
Lecture automatique
Spécifie si la vidéo doit être lue à l'ouverture de la page web .
Rembobinage automatique
Spécifie si la commande de lecture revient à la position de départ une fois la lecture de la vidéo terminée.
Délai mise en tampon
Spécifie le temps, en secondes, requis pour la mise en mémoire tampon avant que la vidéo ne commence à être lue. Le temps de buffer par défaut est défini sur 0 pour que la vidéo commence à être lue instantanément après avoir cliqué sur le bouton Lecture. (Si la lecture automatique est sélectionnée, la vidéo commence à être lue dès qu'une connexion est établie avec le serveur.) Vous pouvez définir un temps de buffer si vous diffusez une vidéo dont le débit binaire est plus élevé que la vitesse de connexion du visiteur de site, ou lorsque le trafic Internet peut provoquer des problèmes de bande passante ou de connectivité. Par exemple, si vous souhaitez envoyer 15 secondes de vidéo à la page web avant que la page web ne commence à lire la vidéo, définissez le temps de buffer sur 15.
Cliquez sur OK pour fermer la boîte de dialogue et ajouter le fichier FLV
à la page web.
La commande Insérer FLV génère un fichier SWF de lecteur vidéo et un fichier SWF d'habillage qui sont utilisés pour afficher la vidéo sur une page web. La commande génère également un fichier main.asc que vous devez charger sur Flash Media Server. (Pour voir les nouveaux fichiers, vous devrez peut-être cliquer sur le bouton Actualiser dans le panneau Fichiers.) Ces fichiers sont stockés dans le même répertoire que le fichier HTML auquel vous ajoutez du contenu vidéo.Lorsque vous chargez la page HTML contenant le fichier FLV, pensez à charger les fichiers SWF sur le serveur web et le fichier main.asc sur Flash Media Server.
Annotation
Si vous avez déjà un fichier main.asc sur le serveur, consultez l'administrateur du serveur avant de charger le fichier main.asc généré par la commande Insérer FLV.
Vous pouvez facilement charger tous les médias requis en sélectionnant l'espace réservé du composant vidéo dans la fenêtre de document Dreamweaver, et en cliquant sur le bouton Charger les médias dans l'inspecteur de propriétés (Fenêtre > Propriétés). Pour afficher une liste des fichiers requis, cliquez sur Afficher les fichiers requis.
Annotation
Le bouton Charger les médias ne charge pas le fichier HTML qui contient le contenu vidéo.
Modification des informations de téléchargement de Flash Player
Lorsque vous insérez un fichier FLV sur une page, Dreamweaver insère du code qui détecte si l’utilisateur dispose de la version appropriée de Flash Player. Si ce n’est pas le cas, la page affiche du contenu alternatif afin d’inviter l’utilisateur à télécharger la version la plus récente. Vous pouvez à tout moment modifier ce contenu alternatif.
Cette procédure s’applique également aux fichiers SWF.
Annotation
Si l’utilisateur ne dispose pas de la version requise mais bien de Flash Player en version 6.0 r65 ou une version ultérieure, le navigateur affiche un programme d’installation express de Flash Player. Si l’utilisateur refuse l’installation express, la page affiche le contenu alternatif.
Dans
la vue Création de la fenêtre de document, sélectionnez le fichier SWF ou FLV
.
Cliquez sur l’icône en forme d’œil dans le fichier SWF ou FLV.
Annotation
Vous pouvez également appuyer sur Ctrl + ] pour passer à la vue de contenu alternatif. Pour revenir à la vue SWF/FLV, appuyez sur Ctrl + [ jusqu'à ce que tout le contenu alternatif soit sélectionné.Appuyez ensuite sur Ctrl + [ à nouveau.
Modifiez le contenu comme vous modifiez n'importe quel autre contenu dans Dreamweaver.
Annotation
Vous ne pouvez pas ajouter de fichiers SWF ou FLV comme contenu alternatif.
Cliquez à nouveau sur l'icône en forme d'œil pour revenir à l'affichage du fichier SWF ou FLV.
Dépannage des fichiers FLV
Cette section détaille quelques-unes des causes les plus courantes de problèmes avec les fichiers FLV.
Problèmes d'affichage causés par l'absence de fichiers associés
Le code généré par Dreamweaver CS4 et versions ultérieures repose sur quatre fichiers dépendants, différents du fichier FLV lui-même :
swfobject_modified.js
expressInstall.swf
FLVPlayer_Progressive.swf
Le fichier d'enveloppe (par exemple Clear_Skin_1.swf)
Notez que Dreamweaver CS4 et les versions ultérieures comportent deux fichiers dépendants supplémentaires par rapport à Dreamweaver CS3.
Les deux premiers de ces fichiers (swfobject_modified.js et expressInstall.swf) sont installés dans un dossier appelé Scripts, que Dreamweaver crée à la racine de votre emplacement s'il n'existe pas déjà.
Les deux autres fichiers (FLVPlayer_Progressive.swf et le fichier d'habillage) sont installés dans le même dossier que la page dans laquelle le FLV est incorporé.Le fichier d'habillage contient les contrôles du FLV, et son nom dépend de l'habillage choisi dans les options décrites dans l'aide de Dreamweaver.Par exemple, si vous choisissez Clear Skin, le fichier se nomme Clear_Skin_1.swf.
Les quatre fichiers dépendants DOIVENT être chargés sur votre serveur distant pour que le FLV s'affiche correctement.
Oublier de charger ces fichiers est la cause la plus courante d'échec des fichiers FLV à s'exécuter correctement dans une page web.Si l'un des fichiers est manquant, vous pourriez voir une « boîte blanche » sur la page.
Pour vous assurer d'avoir chargé tous les fichiers dépendants, utilisez le panneau Fichiers de Dreamweaver pour charger la page dans laquelle le FLV apparaît.Lorsque vous chargez la page, Dreamweaver vous demande si vous voulez charger les fichiers dépendants (sauf si vous avez désactivé cette option).Cliquez sur Oui pour télécharger les fichiers dépendants.
Problèmes d'affichage lors de l'aperçu des pages en local
En raison des mises à jour de sécurité dans Dreamweaver CS4, vous ne pouvez pas utiliser la commande Aperçu dans le navigateur pour tester une page avec un FLV incorporé, sauf si vous définissez un serveur de test local dans votre définition de site Dreamweaver et utilisez le serveur de test pour afficher un aperçu de la page.
Normalement, vous avez besoin d'un serveur de test uniquement si vous développez des pages avec ASP, ColdFusion ou PHP (voir Configurer votre ordinateur pour le développement d'applications).Si vous créez des sites web qui utilisent uniquement HTML et n'avez pas défini de serveur de test, appuyer sur F12 (Windows) Opt+F12 (Macintosh) produit un fouillis de contrôles d'habillage à l'écran.La solution de contournement consiste soit à définir le serveur de test et utiliser le serveur de test pour prévisualiser votre page, soit charger vos fichiers sur un serveur distant et les visualiser là-bas.
Annotation
Il est possible que les paramètres de sécurité soient également responsables d'une incapacité à prévisualiser le contenu FLV local, mais Adobe n'a pas pu le confirmer.Vous pouvez tenter de modifier vos paramètres de sécurité afin de voir si le problème est résolu. Pour plus d’informations sur la modification de vos paramètres de sécurité, consultez la Tech Note 117502.
Autres causes possibles de problèmes de fichiers FLV
Si vous éprouvez des difficultés à prévisualiser localement, assurez-vous que l’option Aperçu avec fichier temporaire est bien désactivée dans la section Modifier > Préférences > Aperçu en temps réel.
Assurez-vous de bien disposer de la version la plus récente du complément Flash Player.
Faites preuve de prudence lorsque vous déplacez des fichiers et des dossiers à l’extérieur de Dreamweaver. Lorsque vous déplacez des fichiers et dossiers à l’extérieur de Dreamweaver, Dreamweaver ne peut pas garantir l’exactitude des chemins d’accès aux fichiers associés à un fichier FLV.
Vous pouvez remplacer provisoirement le fichier FLV qui pose problème par un fichier FLV dont vous êtes sûr qu’il fonctionne. Si le fichier FLV de remplacement fonctionne, c’est que le problème réside dans le fichier FLV d’origine et n’est pas dû à votre navigateur ni à l’ordinateur.
Modification ou suppression d’un composant FLV
Vous pouvez modifier les paramètres de la vidéo sur votre page web en sélectionnant l’espace réservé pour composant vidéo dans la fenêtre de document de Dreamweaver et en utilisant l’inspecteur Propriétés. Vous pouvez également supprimer le composant vidéo puis le réinsérer à l’aide de la commande Insérer > HTML > Vidéo Flash.
Modification du composant FLV
Sélectionnez l'espace réservé du composant vidéo dans la fenêtre de document Dreamweaver en cliquant sur l'icône FLV au centre de l'espace réservé.
Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés) et apportez vos modifications.
Annotation
Vous ne pouvez pas modifier les types de vidéo (du téléchargement progressif au streaming, par exemple) en utilisant l'inspecteur Propriétés.Pour modifier le type de vidéo, supprimez le composant FLV et réinsérez-le en sélectionnant Insertion > Médias > FLV.
Suppression du composant FLV
Sélectionnez l'espace réservé du composant FLV
dans la fenêtre de document Dreamweaver et appuyez sur
Supprimer.
Ajout de vidéo (autres formats)
Pour savoir comment ajouter des vidéos qui ne sont pas des fichiers .flv, consultez la section Ajout de vidéo (non FLV).
Vous pouvez également souhaiter savoir comment insérer le contenu du plug-in dans Dreamweaver pour lire des fichiers .mp3 ou des vidéos Quicktime dans votre site Dreamweaver.
Articles connexes
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
