Passer au contenu

Insérer des vidéos dans une page Web

Récupérez un clip vidéo sur un site de partage et affichez-le sur votre propre site Web.

Sur les sites Web comme YouTube et Dailymotion, vous trouvez toujours un lecteur multimédia pour diffuser des vidéos sur votre site. Si la présence du logo vous gêne, vous avez toujours la solution d’héberger et de diffuser vous-même ces vidéos. Attention : les manipulations sont réservées aux utilisateurs familiarisés avec la création de pages Web.

01. Choisissez vos vidéos

La méthode la plus simple consiste à intégrer dans sa page Web le lecteur d’un site de partage de vidéos, tel que YouTube (fr.youtube.com) ou Dailymotion (www.dailymotion.com). Nous préférons le premier en raison de la personnalisation plus poussée du lecteur vidéo, mais le principe est similaire chez Dailymotion. Il y a de grandes chances que la vidéo qui vous intéresse soit déjà présente sur YouTube. Sinon, il vous suffit de vous identifier ou de créer un compte et d’en envoyer une, en veillant bien entendu à être propriétaire de ses droits. La procédure s’effectue via un clic sur le bouton Upload affiché en page d’accueil. Une fois que vous êtes sur la page de visualisation de la vidéo, celle que vous venez de transférer ou une autre, cliquez sur le lien Playlists (stocker ses vidéos dans Favoris ne permet pas de changer leur ordre de lecture). YouTube vous demande alors d’indiquer une liste existante ou d’en créer une nouvelle en remplissant un formulaire. Vous allez alors ajouter dans votre liste de lecture (Playlist) les vidéos que vous voulez insérer dans votre site.

02. Créez un lecteur personnalisé

Cliquez sur le lien Compte, en haut à droite, puis sur Lecteurs vidéo personnalisés, dans la section Gérer mes vidéos, et enfin sur le bouton Créer un lecteur personnalisé. Donnez un nom au lecteur, choisissez une couleur et une mise en page, cliquez sur le nom de votre liste de lecture dans la zone Contenu et cliquez sur le bouton Sélectionner. Cliquez enfin sur le bouton Générer le code lorsque vous êtes satisfait. Cliquez une fois dans la zone Code d’intégration, le code HTML est alors automatiquement sélectionné. Faites un clic droit dessus et choisissez Copier.

03. Insérez le code HTML et modifiez l’ordre des vidéos

Ouvrez votre page Web dans votre éditeur habituel et collez le code à l’endroit approprié. Sauvegardez et testez le résultat, soit localement si vous avez un serveur de développement, soit en transférant la page sur votre site. Si vous n’êtes pas satisfait de l’ordre d’apparition des vidéos, retournez sur YouTube pour les réorganiser. Dans Compte, Vidéos, Favoris et Playlists, cliquez sur le nom de votre liste et changez les numéros présents dans les cases de droite, puis cliquez sur le bouton Réorganiser.

04. Utilisez un lecteur ultraléger

Si vous ne souhaitez pas utiliser le lecteur vidéo d’un site de partage, ne serait-ce qu’en raison de la présence d’un logo, vous avez la possibilité d’installer un lecteur multimédia sur votre serveur. Dans ce cas, il faudra aussi encoder vos vidéos au format FLV et les héberger sur le serveur. L’encodage se fait soit via le site http://flvencoder.com, limité à 100 Mo par fichier, soit à l’aide du logiciel Taka FLV Encoder http://megafonts.free.fr/flv, gratuit et en français. En ce qui concerne le lecteur, le meilleur est FLV Player et se récupère à l’adresse http://flv-player.net. Il existe en cinq versions, dont une capable de gérer une liste de lecture. Téléchargez la version Maxi (un fichier SWF de 12 Ko seulement), et transférez-la sur votre site. Rendez-vous ensuite sur la page de génération du code http//flv-player.net/players/maxi/generator. Dans le champ flv, saisissez l’adresse de la vidéo sur votre site, réglez les autres options accessibles par la liste Catégorie et copiez-collez le code HTML dans votre page. Pour finir, modifiez ce code en remplaçant les mentions http://flv-player.net/medias/ par l’adresse de votre site où est stocké le lecteur.

🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.


Sylvain Simoneau