(Blogger) Gérer les vidéos

La seule fonction disponible sur Blogger pour installer une vidéo est de cliquer sur le clapet noir :

et de télécharger la vidéo depuis votre PC.

Pour utiliser des services externes : (Tous les blogs) Gestion des podcast

(OverBlog) Gérer les vidéos

Vous avez plusieurs possibilités pour insérer des vidéos sur votre blog.

La première

OverBlog travaille en partenariat avec Wat et Dailymotion.
Dans Documents > Mes Vidéos, vous vous inscrivez sur ces 2 sites

Vous pourrez ensuite héberger vos vidéos chez eux. Attention, la qualité de l'image n'est pas toujours au rendez-vous ! Vous obtiendrez un code à coller en HTML pour afficher la vidéo sur votre blog.

La deuxième

Si vous êtes en Privilège ou Premium, vous pouvez enregistrer vos vidéos dans Documents > Mes Fichiers. Pensez à créer des dossiers pour les classer.
Vous obtenez une adresse pour cette vidéo.
Dans votre éditeur d'articles, vous cliquez sur Ajouter une vidéo

Une fenêtre s'ouvre où vous collez votre adresse

La troisième :

Vous trouvez une vidéo qui vous plaît sur Youtube ou autre plateforme, vous copiez le code embed

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/GJCQDd4vYjg?fs=1&amp;hl=fr_FR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/GJCQDd4vYjg?fs=1&amp;hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Et dans l'éditeur d'articles, vous cliquez sur Ajouter une vidéo. Vous collez votre code ici :

La quatrième :

Lors de l'hébergement, les vidéos sont compressés au détriment de la qualité. Vous ne savez plus où aller pour conserver des images de qualité, je vous propose d'essayer ArchiveHost (gratuit).
Vous obtiendrez une adresse pour votre vidéo, il suffira de reprendre les étapes de la deuxième possibilité pour l'installer sur votre blog.

Pour utiliser des services externes : (Tous les blogs) Gestion des podcast

Installer un vidéo chat

Dialogoo.com  permet  d'installer sur votre blog un vidéo chat, gratuit et très simple à mettre en oeuvre.

Cliquez sur le lien ci-dessus et sélectionnez "Intégrez-le" en bas de la page d'accueil, à droite.

Indiquez vos informations personnelles (et surtout l'adresse URL de votre blog) puis paramétrez la taille de votre fenêtre de chat, les couleurs, le texte sur vos boutons...

Vous pouvez voir à quoi va ressembler votre chat en cliquant sur "Preview".

Une fois ce travail terminé, sélectionnez Créer chat et téléchargez le logiciel d'administration.

Vous obtenez en haut de la page le code à copier et coller dans votre article ou module, en HTML

Exemple de code:

<script language='JavaScript' src='http://www.dialogoo.com/new/JAVASCRIPT.php?room=39896'></script>

Et voilà votre vidéo chat installé, sur lequel vos visiteurs pourront se connecter à tout moment:



En outre, il y a un logiciel d'administration à télécharger pour ceux qui le désirent, mais je ne l'ai pas testé.

Retoucher ses vidéos

Vous pouvez avoir envie de retravailler vos vidéos : les découper, le rajouter un fondu enchaîné, de la musique ...

Ces outils peuvent vous aider :

Windows Movie Maker : un logiciel

L'exemple montré ci-dessous est un extrait de film -Lara Croft 2- de moins de 30 secondes, afin de ne pas encourir de poursuites pour violation de copyright.

Cet extrait a été très simplement réalisé avec Windows Movie Maker, normalement livré dans votre configuration de base Windows XP.

Après avoir importé votre vidéo dans WMM, vous pouvez découper votre vidéo comme bon vous semble (Menu Clip, "Fractionner" ou premier bouton à droite sous la visionneuse).

Une fois votre extrait sélectionné, vous pouvez le faire glisser d'un coup de souris sur la table de
montage séquentiel, sur laquelle vous pourrez travailler des effets (comme le fondu en ouverture et en fermeture dans mon exemple), ajouter un commentaire, une musique, etc.



Eyespot : un générateur en ligne

Allez sur Eyespot

Cliquez sur Sign Up pour vous inscrire : pseudo - email - mot de passe - pays - date de naissance et sexe.

Vous pouvez faire des mixages sur vos propres vidéos en les uploadant sur le site. Comme je n'avais pas de vidéo sous la main, j'ai utilisé une des vidéos présentes sur le site. La procédure reste la même, une fois le téléchargement de votre vidéo effectué.

Mixable : ce sont des vidéos libres de droit que vous pouvez mixer

Choisissez votre vidéo et cliquez sur Mix

En haut, vous avez plusieurs séquences de cette vidéo. Avec la souris, vous sélectionnez séquence par séquence et les titres sur la représentation graphique du bas (controls : mix and play) .

Dans le menu de gauche : Tools
vous cliquez sur Effects, vous choisissez votre effet (sepia, par exemple) en cliquant sur Aplly to all

sur Transition pour avoir un effet de fondu-enchainé : en tirant chaque image représentant le fondu sur la séquence voulue dans le graphique du bas

surTitle, puis Create new title Frame, pour renommer cette vidéo, puis cliquez sur All Done

Toujours dans le menu de gauche : Tags
Vous pouvez tagguer votre vidéo, c'est-à-dire lui donner des mots-clés

En haut à gauche, à côté de Mixer, cliquez sur Enter Title, inscrivez le nouveau titre et cliquez sur Submit

Une fois, votre oeuvre achevée, vous cliquez sur Saved Media

Vous cliquez sur Mix and Play : Controls: Mix and Play 00:00

Le mixage se réalise.

Vous cliquez sur MySpot dans le menu en haut à gauche, puis Mixes, puis sur votre vidéo mixée

Vous obtenez un code

<embed src='http://eyespot.com/flash/medialoader.swf?vurl=http%3A%2F%2Fdownloads.eyespot.com%2Fplay
%3Fr%3D0XCzIG2UEns5cXiEJW0xIWlFgB' type='application/x-shockwave-flash' width='432' height='407'></embed>

Vous le collez en html.

NB : Ce code n'est pas éternel

Créer une fenêtre pop up avec une vidéo

L'intérêt est de permettre au visiteurs de tourner les pages de votre blog, tout en ayant sous la main la vidéo. Placée dans une fenêtre pop up, elle reste toujours présente à l'écran.

Première étape :

Vous avez trouvé une vidéo chez Youtube ou daylimotion et vous avez obtenu un code object.

Prenons comme exemple, la vidéo de Zazie : J'étais là

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/GX7Kg39E3Co&rel=1"></param><param name="wmode"
value="transparent"></param><embed src="http://www.youtube.com/v/GX7Kg39E3Co&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425"
height="355"></embed></object>

Deuxième étape :

Au lieu de coller ce code directement en HTML :

• vous allez ouvrir votre Bloc note
  
• le coller
  
• enregistrer ce document sous Zazie.htm
  

Troisème étape :

Vous hébergez ce fichier Zazie.htm :
chez Archive-host par exemple

Vous obtenez une adresse : http://ddata.over-blog.com/xxxyyy/0/37/17/67/Musique/zazie.htm 

Quatrième étape :

Vous mettez ce fichier en lien en collant en html :

<a onclick="window.open(this, 'Zazie', 'width=425,height=355'); return false;" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Musique/zazie.htm">Zazie - J'&eacute;tais l&agrave;</a>

En rouge : l'adresse de votre fichier

Ensuite, vous fixez les dimensions de cette fenêtre. En général, elles sont dans le code object : width="425" height="355"

Et vous obtenez :

Zazie - J'étais là

Ainsi, il suffit à vos lecteurs de cliquer sur le lien, une fenêtre avec votre vidéo s'ouvrira. S'il change de page sur le blog, la vidéo continuera à tourner.

Mettre en ligne une vidéo

Les sites de vidéos suivants vous proposent :

• d'héberger et de diffuser vos propres vidéos, 
• de diffuser les vidéos des autres internautes.

Pour la diffusion sur votre blog, plusieurs codes sont disponibles, mais tous ne sont pas compatibles.

Pour cette raison, je vous mets le modèle du code à copier : il s'agit du lecteur flash.
Le code commence par <object et finit par </object>

En rouge, ce sont des parties de code non indispensables au fonctionnement : publicité pour le site, l'artiste ...vous pouvez les supprimer.


Le code devra être collé en HTML.

WAT

Sur WAT.TV, vous faîtes une recherche sur la vidéo qui vous intéresserait. Il y a différents domaines : télé, sports, arts, voyages...

Un code player de ce type vous est proposé :

<div><object width='456' height='390'><param name='movie' value='http://www.wat.tv/swf/561591p3nOexG462360'></param><param name='autoplay'
value='false'></param><embed src='http://www.wat.tv/swf/561591p3nOexG462360' type='application/x-shockwave-flash' width='456' height='390'></embed></object><br/><b><a href='http://www.wat.tv/audio/462360/Vianne-Stephan-Eicher-Rendez-Vous.html'>Stephan Eicher Rendez-Vous</a></b><br /><a href='http://www.wat.tv/audios' title='Tous les audios'>Audio</a><br /><i>Envoyé par <a href='http://www.wat.tv/Vianne'>Vianne</a> sur <a href='http://www.wat.tv'>wat.tv</a></i></div>

YOUTUBE

Même principe chez YOUTUBE

Vous cherchez la vidéo et vous copiez le code EMBED

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

DAILYMOTION

Chez DAILYMOTION

Cherchez votre vidéo.

Choisissez Lecteur exportable.

Copiez le code

<div><object width="425" height="263"><param name="movie" value="http://www.dailymotion.com/swf/2QTH9QaLuqhjYg0UU"></param><param name="allowfullscreen"
value="true"></param><embed src="http://www.dailymotion.com/swf/2QTH9QaLuqhjYg0UU" type="application/x-shockwave-flash" width="425" height="263"
allowfullscreen="true"></embed></object><br /><b><a href="http://www.dailymotion.com/video/x29t1k_renan-luce-la-lettre_music">Renan Luce - La

lettre</a></b><br /><i>envoy&eacute; par <a href="http://www.dailymotion.com/Nuigrav">Nuigrav</a></i></div>

WIDEO

Sur Wideo.fr

Recherchez la vidéo.

A droite de la vidéo, cliquez sur Bloguer/copier cette vidéo

Sous Sur un site perso, un blog ou sur eBay, etc... , cliquez sur Récupérez le code

Copiez le

<object type="application/x-shockwave-flash" data="http://www.wideo.fr/p/fr/iLyROoaft125.html" width="400" height="368">
<param name="movie" value="http://www.wideo.fr/p/fr/iLyROoaft125.html" />
<param name="wmode" value="transparent" />
<embed src="http://www.wideo.fr/p/fr/iLyROoaft125.html" width="400" height="368" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
<a href="http://www.wideo.fr/video/iLyROoaft125.html" title="AMEL BENT feat. Diam's - A 20 ANS - wideo"><img src="http://t.kewego.com/t/1/0498/154x114_iLyROoaft125_2.jpg" alt="AMEL
BENT feat. Diam's - A 20 ANS - wideo"/></a><br /><a href="http://www.wideo.fr/video/iLyROoaft125.html">AMEL BENT feat. Diam's - A 20 ANS - wideo</a>
</embed>
</object><div style="width: 400px;"><a href="http://www.wideo.fr/video/iLyROoaft125.html">AMEL BENT feat. Diam's - A 20 ANS - wideo</a> <br />Découvre le nouveau

clip d'Amel Bent featuring Diam's !<br />

<br />

L'album &quot;A 20 ans&quot; toujours dans les bacs !

<div>Mots-clés : <a href="http://www.wideo.fr/search/?q=amel bent">amel bent</a> <a href="http://www.wideo.fr/search/?q=diam's">diam's</a> <a

href="http://www.wideo.fr/search/?q=a 20 ans">a 20 ans</a> <a href="http://www.wideo.fr/search/?q=nouvelle star">nouvelle star</a> <a

href="http://www.wideo.fr/search/?q=ma philosophie">ma philosophie</a> </div> <div style="text-align: right;">

<a href="http://www.wideo.fr/video/iLyROoaft125.html">Video</a> de <a

href="http://www.wideo.fr/search/?q=user:fan2clips">fan2clips</a> </div></div>

TINYPIC

Allez sur  TINYPIC

Uploadez votre fichier vidéo

Vous pouvez lui mettre des tags (mots clés)

Cliquez sur Téléchargez maintenant

Copiez le code : HTML pour sites Web

<embed width="440" height="380" type="application/x-shockwave-flash" src="http://v3.tinypic.com/player.swf?file=2ytsd1f&s=3"></embed>

Encadrer ses vidéos

De jolis encadrements pour mettre en valeur vos vidéos et attirer l'oeil vers elles.

Allez chez MOONK

Inscrivez-vous.
Vous recevez un mail : vous devez cliquer sur un lien qui s'y trouve pour activer votre compte.

Cliquez sur Vidéoshow.

Import your File : cliquez sur Local Disque

Uploadez votre vidéo

Choisissez votre encadrement, sa taille

Nommez le.

Récupérez le code HTML et collez le en html

<table style="border-collapse:collapse"><tr><td><embed pluginspage="http://www.macromedia.com/go/getflashplayer" base="http://www.moonk.com"
wmode="transparent" src="http://www.moonk.com/themes/MAGIX_MOONK/flash/player/player_loader.swf?xmlpath=
http://www.moonk.com/moonk/xml&eid=0AB8EE003D9711DC85D19E70D45BFC0D&moonk=true" height="272" width="272" type="application/x-shockwave-flash" hspace="0" vspace="0" quality="high"
allowscriptaccess="always" swLiveConnect="true"></embed></td></tr><tr><td style="text-align:center;"><a href="http://www.moonk.com/redirects/moonk_player_link.htm"><img style="border:none;" src="http://www.moonk.com/themes/MAGIX_MOONK/images/logo_moonkSmall.gif" /></a> <a href="http://www.moonk.com/redirects/moonk_player_link.htm" style="font-size:10px;color:#33a1ff;text-decoration:none;" onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">Get your own Moonk!</a></td></tr></table>

on obtient

Get your own Moonk!

Convertir une vidéo Youtube en fichier MP3

Vous avez trouvé une chanson qui vous plaît sur Youtube, mais vous ne tenez pas à conserver les images qui l'accompagnent.

La solution est sur VIDTOMB3

Première étape :

Sur Youtube, vous copiez l'URL de la vidéo dont la musique vous intéresse :

http://fr.youtube.com/watch?v=V1Dqz3uYNpg

Deuxième étape :

Sur VIDTOMB3, vous collez cette adresse et demandez la conversion en MP3

Vous cliquez sur Download

Quand c'est fini, vous cliquez sur Download.

Vous enregistrez le fichier .mp3 sur votre PC.

Mettre en ligne une vidéo dans une vidéoBox

Encore un joli effet de lightbox et ce n'est pas très difficile à réaliser.
Attendez que la page et tous les fichiers se chargent et faîtes le test :




Cliquez pour voir la vidéo

Si votre blog est sur OverBlog, vous pouvez utiliser les adresses de mes fichiers. Vous devez seulement changer l'adresse de votre vidéo

Première étape :

Allez sur VidéoBox

Cliquez sur Download VideoBox 1.1

Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire vers.

Deuxième étape :

Dans l'administration de votre blog - Mes documents - Autres Fichiers :

• vous créez un répertoire videobox
  
  
  • dans ce répertoire, vous enregistrez les fichiers
    
    
    • closelabel.gif
      
    • loading.gif
      
  • vous notez leur adresse
    

Troisième étape :

Sur votre PC :

• vous ouvrez le bloc-note
  
• vous appelez le fichier videobox.css
  
• vous modifiez les chemins des images en les remplaçant par les nouvelles adresses (2ème étape)
  
• vous enregistrez le fichier sous le même nom
  

Quatrième étape :

Dans votre administration - Mes documents - autres fichiers - videobox :

• vous enregistrez les fichiers suivants :
  
  
  • flvplayer.swf
    
  • swfobject.js
    
  • videbox.css
    
  • videobox.js
    
• vous notez leur adresse
  

Cinquième étape :

Lors de l'installation de la vidéo, vous collez en HTML

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/mootools.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/swfobject.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/videobox.js"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/videobox.css" type="text/css" media="screen" />
<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">Cliquez pour voir la vidéo</a>

En rouge, les fichiers enregistrés à l'étape 4
En bleu, l'adresse de la vidéo . On trouve cette adresse sur YouTube dans la barre de menu du navigateur

Mettre en ligne une vidéo dans une ibox

Une Ibox présente un effet comparable à la lightbox : fond sombre qui recouvre le blog.
Attendez le chargement complet de la page et donc des fichiers, cliquez, vous verrez le résultat est sympa et ce n'est pas très difficile à réaliser.

My YouTube Video

Etape 1 :

Allez sur Ibox

Cliquez sur ibox.2.17c.zip

Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers

Etape 2 :

Dans l'administration de votre blog, Mes Documents - Autres fichiers :

• vous créez un répertoire ibox
  
  
  • dans lequel vous créez un sous-répertoire images
    
    
    • dans lequel vous enregistrez :
      
      
      • bg.png
        
    • vous notez son adresse
      

Etape 3 :

Sur votre PC, vous ouvez votre Bloc-Notes, vous appelez le fichier ibox.js :

• vous recherchez le fichier bg.png
  
• vous modifiez son adresse (vous l'avez noté à l'étape 2)
  
• vous enregistrez sous le même nom
  

Etape 4 :

Dans l'administration de votre blog, Mes Documents - Autres Fichiers - répertoire ibox :

• vous enregistrez le fichier ibox.js
  
• vous notez son adresse
  

Etape 5 :

Vous allez sur Youtube :

• vous choisissez votre vidéo,
  
• vous notez l'adresse qui est dans la barre de navigation de votre navigateur
  

Etape 6 :

En HTML de l'article où vous voulez placer ce lien, vous collez

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/ibox.js" type="text/javascript"></script><a rel="ibox" href="http://fr.youtube.com/watch?v=smqBrRhLf2s">My YouTube Video</a>

Vous personnalisez :

• en rouge : l'adresse de votre fichier ibox.js : vous l'avez noté lors de l'étape 4
  
• en vert : l'adresse de votre vidéo : vous l'avez noté lors de l'étape 5
  
• en bleu : le nom du lien qui apparaît à l'écran