Accueil > Tutoriels > Mettre une vidéo sur son site Internet

Mettre une vidéo sur son site Internet

22/06/2006

Les lecteurs assidus du Koondellitch auront eu l’occasion de consulter de courtes vidéos sur ce blog. Les principaux problèmes pour la diffusion de vidéos sont :

  • le lecteur : il doit être suffisamment universel pour pouvoir être lu par la majorité des internautes ;
  • l’hébergement : une vidéo peut être lourde et si celle-ci a du succès, elle va générer un important traffic qui peut être coûteux chez un hébergeur payant ;
  • le format de diffusion : il doit être visible par la majorité des personnes, quelque soit le format de départ de votre vidéo ;
  • la facilité de mise en place et de visualisation sont les derniers critères principaux.

Avec la montée des possibilités multimédia qu’offre Internet, on voit fleurir nombre de sites proposant un service d’hébergement de vidéo gratuit avec possibilité d’intégration sur un site personnel. On peut citer Google Video, Yahoo Video ou encore l’excellent DailyMotion. Ces sites permettent l’émergence de ce qu’on appelle les vidéo blogs sur lesquels, les bloggers ne connaissant rien en informatique, publient chaque jour des vidéos personnelles.

Ce billet est un tutoriel pas-à-pas adressé à l’internaute non aguerri désireux d’intégrer une vidéo de courte durée (moins de 10 minutes) sur son site personnel. Comme exemple, nous prendrons l’insertion d’un passage de Florence Foresti à l’émission « On a tout essayer » à l’aide du service d’hébergement de vidéo proposé par le site référence en la matière : YouTube.com.

Dans ce tutoriel, nous allons apprendre à :

  • Créer un compte sur youtube.com ;
  • Envoyer une vidéo sur youtube.com ;
  • Intégrer la vidéo sur son blog ;

Pour ce faire, vous devez avoir en votre possession :

  • une vidéo dont vous êtes propriétaire ou libre de droit ;
  • un navigateur web dans sa dernière version (j’utilise Firefox 1.5.0.4 dans les captures) avec le javscript et les cookies activés/autorisés ;

Fin prêts ? c’est parti.

1. Créer son compte sur youtube.com

Youtube.com s’est imposé durant les deux dernières années comme le site référence d’hébergement gratuit de vidéo de courte durée diffusable sur Internet. On y retrouve une multitude de vidéos déposées par des millions d’internautes de par le monde. Bref, le site anti-productif par excellence à ne pas consulter au boulot.

  • Pour commencer, ouvrez une nouvelle fenêtre ou un nouvel onglet et entrer l’adresse de youtube.com dans la barre d’adresse. Ah oui. Première constatation, le site est en anglais. Il va falloir faire avec les amis. La langue de Shakespeare est o-bli-ga-toi-re au bon surf sur Internet.
  • En haut, à droite, cliquer sur le lien « Sign Up » (S’inscrire). Une nouvelle fenêtre s’ouvre avec un formulaire ayant pour titre « Join YouTube » (Rejoindre YouTube). Vous devez donner des renseignement permettant de créer votre compte :
    • Email Address (votre adresse eMail qui doit être valide !),
    • User Name (Choisissez un nom d’utilisateur),
    • Password (Choisissez un mot de passe),
    • Confirm Password (Retapez le même mot de passe afin de s’assurer que vous n’ayez pas commis de faute de frappe),
    • Country (Choisissez France dans la liste),
    • Postal Code (Ne mettez rien),
    • Gender (Cocher male si vous êtes un homme et female dans le cas contraire),
    • Date of Birth (enfin votre date de naissance).
    • Décocher la case au dessous du formulaire si vous ne voulez pas recevoir de mails dans votre boîte.
  • Pour finir, valider le formulaire en cliquant sur le bouton « Sign Up » (S’inscrire)
  • Dans la page suivante, vous avez la possibilité de recommander le site à des amis. Oublions cela pour nous recentrer sur la prochaine étape. Notre inscription étant terminée.

2. Envoyée sa vidéo sur youtube.com

La première étape n’était pas difficile. La seconde est un peu plus dur alors je vais l’illustrer au fur et à mesure à l’aide de mon exemple : envoi de la vidéo de Florence Foresti.

  • Assurez-vous d’être identifié sur le site. Pour savoir si vous l’êtes, votre pseudonyme doit être affiché en haut à droite de l’écran. S’il ne l’est pas et que vous avez toujours « Sign Up » de marqué, cliquez sur le lien « Log in » (Se connecter) et dans la nouvelle fenêtre, entrez vos identifiants et mot de passe dans le formulaire de droite. Cliquer sur le bouton « Log In » (Se connecter)

  • Cliquez sur l’onglet intitulé « Upload » (Envoi) comme encadré en rouge sur l’image ci-dessus. Le formulaire ci-dessous apparaît :

  • Dans ce formulaire, vous allez rentrer différents informations descriptive pour votre vidéo :
    • Title : le titre que vous voulez donner à votre vidéo ;
    • Description : un texte court présentant la vidéo ;
    • Tags : ce sont des étiquettes permettant de catégoriser votre vidéo ;
    • Video Category : Cocher la catégorie qui correspond le mieux à voter vidéo ;
  • Valider le formulaire en cliquant sur le bouton « Continue ». Rassurez-vous, vous pourrez toujours changer toutes ces informations plus tard.
  • La fenêtre d’envoi s’affiche comme ci-dessous :

  • Il est l’heure maintenant d’envoyer votre fichier vidéo sur les serveurs d’hébergement de YouTube.com. Cliquer sur le bouton « Browse » (Parcourir). Une fenêtre s’affiche vous demandant de sélectionner sur votre ordinateur le fichier vidéo que vous voulez envoyer. Personnellement, il s’agit de « Florence Foresti – Halte aux chiens.mpg ». Valider la fenêtre de sélection de fichier.
  • Considérez ensuite, les options au dessous du cadre bleu supérieur :
    • Public : si vous cochez cette option, votre vidéo sera consultable par tout le monde à partir du site YouTube. Les gens pourront laisser des commentaires, lui donner une note etc. Si la vidéo est trop personnelle et réservée à un cadre restreint, vous choisirez l’autre option : « Private » (Privé). Dans mon cas, je souhaite partager ma vidéo avec le reste de la terre et l’intégrer à mon blog. Rassurez-vous, vous pouvez biensûr intégrer une vidéo privée dans un blog.
  • Cliquez sur le bouton « Upload video » (Envoyer la vidéo).
  • A ce niveau, votre ordinateur envoi le fichier sur les serveurs de Youtube. Vous pouvez consultez la vitesse d’envoi instantanée et le temps restant comme sur l’image ci-dessous :

  • Plus votre vidéo sera importante, plus le transfert sera long. Considérez les informations encadrées en rouge dans l’image ci-dessus. Ce sont les restrictions que doit avoir une vidéo pour être acceptée sur YouTube.com :
    • Elle ne doit pas peser plus de 100 Mo.
    • Elle ne doit pas durer plus de 10 minutes.
  • Une fois l’envoi terminé, vous obtenez une grande page avec un cadre rouge tout en haut annonçant fièrement la réussite de l’envoi.

  • Vous pouvez renseigner des informations supplémentaires sur la date d’enregistrement de votre vidéo (Quand a été tourné le film).
  • Tout au bas du formulaire se trouvent les options de partage de votre vidéo comme le montre la capture suivante :

  • Dans ce formulaire, vous avez les différents champs suivants :
    • Public URL : (Adresse publique) c’est l’adresse de consultation de votre vidéo sur YouTube.com.
    • Broadcast : (Diffusion) c’est le mode de diffusion que l’on a sélectionné auparavant.
    • Allow comment : Permettre les commentaires sur votre vidéo. 3 options, oui, non et selon modération par vos soins.
    • Allow video responses : Permettre les réponses vidéos. Un utilisateur répond à votre vidéo par une des siennes. Les 3 mêmes options s’offrent à vous.
    • Allow ratings : Permettre la notation de votre vidéo sur une échelle de 1 à 5 étoiles. Les 3 mêmes options s’offrent à vous.
    • L’option « Allow external sites to embed this video » (Permettre à des sites externes d’intégrer cette vidéo) doit être mise à « Enabled » (Activé) puisque je veux pouvoir l’intégrer à mon blog. Dans le cas contraire, choisir l’option « Disabled » (Désactivé).
    • Le carré nommé « Embed HTML » est le code HTML que devrez insérer dans votre billet de blog en mode HTML pour afficher la vidéo.
  • Une fois toutes vos options choisies, cliquez sur le bouton « Update video » (Mettre à jour la vidéo). La même page s’affiche. Cliquez maintenant sur l’onglet intitulé « Home » (Accueil) en haut à gauche sous le logo du site. Puis juste en dessous, cliquez sur « My videos » (Mes vidéos). Vous devriez avoir la page suivante :

  • Cette page liste l’ensemble des vidéos que vous avez envoyer sur YouTube.com. Regardez le cadre rouge : il indique l’état de votre vidéo. Pour le moment, il indique « Uploaded (processing, please wait) ». Cela signifie que votre vidéo est en train d’être convertie dans un format affichable. Suivant la qualité et la longeuru de votre vidéo, ce processus peut prendre jusqu’à 10 minutes. Donc raffraîchissez la page (F5) jusqu’à le « status » (état) deviennent comme sur l’image ci-dessous :

  • Le message « Live! » signifie que tout a marcher et que votre vidéo est prête à être regardée et/ou intégrée. Pour voir tout de suite ce que la transformation de votre vidéo a donné, cliquez sur l’image générée de votre vidéo ou sur le lien du nom de votre vidéo. La page suivante s’affiche diffusant votre vidéo (Cliquez sur l’image pour voir la vidéo sur YouTube.com) :

  • Il ne nous reste plus qu’à intégrer la vidéo dans un billet de notre blog.

3. Intégrer ma vidéo dans mon blog

  • Créer un nouveau billet dans la partie rédactionnelle de votre blog. Vous pouvez choisir de le rédiger en mode wiki ou HTML pour la plupart des blogs.
  • Dans la partie principale de votre billet, copiez-collez le code disponible dans le petit cadre gris nommé « Embed » à droite de votre vidéo sur la page de consultation de la vidéo sur youtube.com. Le code doit ressembler au suivant (Rajouter ///html avant et /// aprés le code en mode wiki, tel quel en mode HTML) :

///html

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/4DU_aXT3gpc"></param> <embed src="http://www.youtube.com/v/4DU_aXT3gpc" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

///

  • Vous pouvez modifier les paramètres de dimension de votre vidéo « width » (Largeur) et « height » (Hauteur) à vos souhaits.
  • Accompagnez votre vidéo de commentaires textuels et publiez votre billet. La vidéo devrait apparaitre comme suit :

Et le tour est joué !

4. J’ai eu un problème !

Le scénario ci-dessus est la procédure normale et sans accroc que vous allez rencontrer le plus souvent. Cependant, il se peut que vous rencontriez des imprévus à certaines étapes.

  1. J’ai le message : « Rejected (length of video is too long) » Votre vidéo est trop longue ou pèse trop lourd. Il vous faut la compresser avant de l’envoyer. YouTube recommande que les vidéos soient au format MPEG 4 (Divx, Xvid), de dimension 320×240 avec la bande son encodée en MP3.
  2. J’ai le message : « Failed (invalid file format) » Le format d’encodage de votre vidéo n’est pas supporté par YouTube. Vous devez réencoder votre vidéo dans un format supporté par YouTube : Divx, Xvid pour la video et MP3 pour le son est un couple gagnant à tous les coups.
  3. Mon format vidéo n’est pas reconnu ! Alors vous devez avoir un format vidéo vraiment exotique. J’ai choisi YouTube car c’est l’un de ceux qui gère le mieux les formats non communs. Selon YouTube, les formats vidéos gérés sont : .AVI, .MOV, et .MPG.
  4. Je veux uploader plus de 10 minutes ! C’est possible, mais il faut payer et acquérir un compte « Director ». Très peu de limitations et des outils performants à votre service. Personnellement je n’en ai jamais eu besoin.
  5. Je veux héberger moi-même ma vidéo. C’est que vous êtes plus aguerri aux techniques informatiques. Pas de problèmes. Pour ce faire, vous allez devoir faire vous-même ce que fait YouTube :
    • encoder votre vidéo en .FLV (format vidéo lu par les lecteurs FLASH). Pour ce faire, utilisez le très bon (et GRATUIT) Riva FLV Encoder.
    • Puis, envoyer le fichier .FLV sur votre FTP internet.
    • Enfin, utilisez un lecteur flash pour afficher votre vidéo. Le meilleur (et GRATUIT) est à mon goût celui de NeoLao qui offre de multiples possibilités que je vous laisse découvrir sur son site personnel.

Si vous avez des problèmes, utilisez les commentaires de ce billet.

Categories: Tutoriels Tags: , , ,
Les commentaires sont fermés.