» Trucs et astuces conversion vidéo, diaporama photo, excel 2007

Nous allons apprendre ensemble à insérer une video dans un blog ou un site perso (comme ce que j’ai fait ci-dessus) sans passer par une plateforme de partage de video ! Pour cela, nous devrons:

1. Héberger la video sur un site de création de page perso
2. Générer un code html video à partir de l’emplacement web de la video
3. Copier-coller le code html dans une page web du site perso

L’avantage de faire tout soi-même sans passer par voila video, vimeo, youtube ou dailymotion:

• pas de dégradation d’image
• possibilité de diffuser sa video instantanément
• maîtrise totale de la diffusion de sa video

La formule est particulièrement intéressante si vous souhaitez projeter en ligne un montage video réalisé avec windows movie maker ou un diaporama photo avec musique (comme ci-dessus) à un cercle restreint de contacts:  amis ou membres de votre famille.

Pour une diffusion plus large (problématique de bande passante limitée sur les espaces perso), préférez les sites de partage de video moins flexibles mais plus économiques !

Les 3 générateurs de code html pour video streamée:

• Embeded Media Html Generator (avi, wmv, quicktime, swf, real media)
• Divx code Generator (divx)
• Générateur de player FLV (flv)

vont nous premettre de gérer de multiples formats video: 

fichier avi, fichier wmv, fichier mov, fichier swf, fichier rm, fichier divx, fichier flv

Héberger une video sur internet

Pour ajouter une video sur un site web, il faut d’abord l’héberger sur un espace perso en ligne, nous allons utiliser Google Page Creator (service gratuit de création de page perso limité à 100 mo d’espace).

Créez vous un compte google, et rendez vous sur la page d’administration de votre site (site manager)… Dans la zone dédiée à l’envoi de fichier (en bas à droite), cliquez sur upload, puis sur Parcourir pour aller chercher votre fichier video.

Quand la video est arrivée sur google page creator, elle apparaît en bas de liste:

Il ne nous reste plus qu’à récupérer son adresse sur le web (clic droit sur le lien en bleu + copier l’adresse du lien), et à la coller dans le bloc note (ou word) en attendant.

http://jeanviet.googlepages.com/newyork.wmv

Notre video est maintenant hébergé sur le web !! Mais nous ne pouvons pas tout de suite mettre cette video sur un blog, il faut encore lui ajouter quelques paramètres html (étape suivante ) 

Générer un code html pour video

Une fois la video hébergée, il faut l’encapsuler dans un player web… nous allons donc utiliser un des 3 générateurs de code html pour video vu plus haut. je vous propose de tester ensemble la génération de code html pour:

1. video au format wmv
2. video au format divx
3. video au format flv

En partant du principe que vous avez hébergé votre video sur un site web au préalable.

Générer un player wmv avec embeded media html generator

Rendez vous sur Embeded Media HTML generator, cliquez sur Windows Media

Ensuite nous allons entrer les informations liées à notre video:

• Server: racine d’url de votre hébergement web, ex: http://jeanviet.googlepages.com
• File path: répertoire web + nom de votre video (pas de répertoire pour moi): newyork.wmv
• width = largeur, height = hauteur (ajuster si besoin)
• start automatcally à mettre sur no
• alignment sur center

Quand c’est paramétré, on appuie sur submit, et on a possiblité de copier le code html qu’il faut insérer sur sont site web.

Copiez tout ce qui se situe après <!– begin embedded WindowsMedia file… –> jusqu’à </table> (inclus) : sélectionnez toute cette zone avec votre souris (elle sera alors bleutée) et appuyez ensuite sur Ctrl + C…. Collez le tout ensuite dans un bloc note (word, wordpad) avec les touches Ctrl + V, en attendant d’avoir accès à notre site web.

Si vous voulez voir le rendu, vous pouvez aussi cliquer sur TEST MEDIA

Votre video wmv se lance ainsi dans une nouvelle fenêtre

Générer un player divx avec Divx code generator

Rendez vous sur Divx code generator, et paramétrez le générateur comme suit:

• url complète de votre divx, ex: http://jeanviet.googlepages.com/1366277.divx
• width = largeur, height = longueur, ajuster au besoin
• Video thumbnail, si vous avez une image d’aperçu hébergé sur un site web, vous pouvez insérer son url ici
• je laisse auto-start décoché

Cliquez ensuite sur Generate

Quand c’est généré, rendez-vous dans la zone dédiée au code sous le bouton Preview.

Copiez tout ce qui se situe dans le bloc: sélectionnez toute cette zone avec votre souris (elle sera alors bleutée) et appuyez ensuite sur Ctrl + C…

Collez le tout ensuite dans un bloc note (word, wordpad) avec les touches Ctrl + V, en attendant d’avoir accès à votre site web.

Si vous voulez voir le rendu, vous pouvez aussi cliquer sur Preview

Votre video divx se lance ainsi dans une nouvelle fenêtre

Générer un player flv avec embeded media html generator

Ici avant toutes choses, il faut que vous installiez dans le même répertoire que votre video flv, les 3 fichiers suivants:

• http://jeanviet.googlepages.com/graphic.jpg
• http://jeanviet.googlepages.com/flvplayer.swf
• http://jeanviet.googlepages.com/swfobject.js

Si comme moi, vous utilisez google page creator, il suffit simplement d’ajouter ces 3 fichiers - 1 fois pour toutes - (au même titre que la video flv) dans la zone Uploaded Stuff (revoir manip plus haut)

Une fois que c’est fait rendez vous sur le générateur de player FLV, et paramétrez les options comme suit:

• FLV file absolute URL: emplacement web de votre flv, ex: http://jeanviet.googlepages.com/EE4F127F.flv
• width = largeur, height = hauteur (ajuster si besoin)
• autostart décoché
• Podcast download link décoché

Quand c’est paramétré, on appuie sur Generate Code.

Copiez tout ce qui se situe entre  <script et </script> (balises script incluses) : sélectionnez toute cette zone avec votre souris (la zone sera alors bleutée) et appuyez ensuite sur Ctrl + C.

Collez le tout ensuite dans un bloc note (word, wordpad) avec les touches Ctrl + V, en attendant d’avoir accès à votre site web.

Un aperçu se trouve sous le code, mais ce n’est pas votre video… cela vous donne juste aperçu de la taille que prendra le lecteur flv sur votre page web.

Copier-coller le code html video sur votre site web

Pour ne pas changer nos bonnes vieilles habitudes, restons sur Google Page Creator, qui est certainement le service  de création de page perso le plus simple de la planète !

Vous pouvez aussi coller ces codes sur Blogger, Overblog, MySpace, ou toute autre plateforme de blog qui accèpte l’insertion de code html perso (exit Skyblog donc )…

Pour ceux qui utilisent Wordpress comme moi, il faut installer un plugin qui permet de gérer toutes les balises html (Adsense deluxe par exemple, usage un peu détournée mais ça marche !) que Wordpress n’accèpte pas (pour des raisons de respect strict des standards web).

Revenons à Google page creator, cliquez sur create a new page

Donnez un nom à cette nouvelle page, et appuyez sur Create et edit

Vous accédez alors à votre page qu’il faut éditer

Ensuite cliquez sur le bloc central "Click here to enter your page’s main content"

En bas de page à droite, on clique sur edit html pour ajouter notre code video html

Dans le bloc qui apparaît vous avez la possibilité d’ajouter le code html video de votre choix à la place de <p></p>

Par exemple, je peux mettre mon premier code

Ensuite on appuie sur update, en bas à droite de la fenêtre d’édition

On revient sur la page créée, qu’il faut publier: on appuye sur le bouton publish

Une fois le bouton publish activé, on peut voir notre page en live (en cliquant sur view live en haut à droite)

Et voilà le résultat !!!

Vous n’avez plus qu’à communiquer l’adresse web de cette page à tous vos contacts… sélectionnez l’url dans la barre d’adresse:

http://jeanviet.googlepages.com/mesvideosenstreaming

Et envoyez la via email, msn, ou postez là sur votre skyblog (solution de rechange pour nos pauvres skybloggers qui sont restreints en ajout de code html) !!!

Voilà, c’est aussi simple que ça !! J’attends maintenant vos réactions dans les commentaires, dîtes nous si vous y arrivez, si ça bloque (et où ça bloque ?)… avec tout ces manips, vous devriez devenir un pro du copier-coller !

(Pas encore de note)

 Loading ...

Dans le même genre

• Réaliser un diaporama photo sympa avec musique, images, et texte
• Optimiser la taille d'une video avec VirtualDub et le codec DivX
• WordPress, autoriser l'insertion d'images dans les commentaires
• Video sur ipod: convertir en mp4, mettre video sur ipod touch, nano, iphone
• SUPER, pour convertir toutes vos vidéos dans tous les formats