Inclure une vidéo dans un article

Inclure une vidéo dans un article
Lorsque vous écrivez un article vous pouvez lui attacher des documents. L’inconvénient c’est qu’ils
n’apparaissent qu’en fin d’article un peu comme des pièces jointe à un email.
Le but de ce tutoriel est de pouvoir positionner des vidéos ou des photos à l’intérieur d’un article et non en
document attaché.
Pré-requis : rédiger un article en tant qu’administrateur ou administrateur restreint.
Convertir une vidéo au format FLV (logiciel RIVA ENCODER téléchargement + tutoriel)
Plusieurs méthodes existent en fonction des cas. Je vais vous les présenter de la plus simple à la plus
complexe.
Equipe TICE 84
1
Méthode 1 : fonctionne pour les photos et les vidéos
(de petite taille < à 16 Mo)
1) Attachez un document
- Selon le type de fichier, cliquez sur parcourir afin de
rechercher votre document sur le disque dur.
- Sélectionnez votre fichier grâce à la fenêtre qui s’ouvre.
- - Cliquez sur télécharger
- Votre document est maintenant attaché
à votre article. Ici il s’agit du doc27>
2) Inclure le document dans l’article
Chaque document attaché possède un numéro que Spip va utiliser pour les reconnaître. Ici le n°27.
Dans l’éditeur de texte de Spip, une balise va permettre d’inclure l’image ou la vidéo à l’intérieur de
l’article. Il suffit pour cela de taper « <docX|player|center> » (où X est le n° du document attaché) à l’endroit
où vous voulez que la vidéo apparaisse.
Avantage : très simple d’utilisation, les élèves peuvent le faire tout seul.
Inconvénient : Si le poids du document n’est pas un problème pour des photos, par contre pour les
vidéos, sachez que cette méthode vous limitera à des transferts de 16 Mo maximum.
Equipe TICE 84
2
Méthode 2 : pour les documents de plus de 16 Mo
1) Transférer des fichiers par FTP
Le transfert par FTP (File transfert Protocole) permet de transférer des fichiers beaucoup plus
volumineux.
Pour utiliser ce système de transfert vous aurez besoin d’un logiciel supplémentaire appelé
« Filezilla » et téléchargeable ici :
http://downloads.sourceforge.net/filezilla/FileZilla_3.3.5.1_win32-setup.exe
Tutoriel : http://www.filezilla.fr/filezilla-tuto-cnet.php
Demandez les codes à vos Animateurs Informatiques.
Grace à FileZilla vous pourrez transférer toutes vos vidéos en même temps dans le dossier
« /www/appli/spip/tmp/upload » de votre site. Attention ne créez pas de sous-répertoire sinon Spip
ne retrouvera pas vos vidéos.
Ces vidéos seront donc utilisables par Spip dans les étapes suivantes !
2) Attacher un fichier transféré par FTP à un article
-
Placez-vous en modification d’un article.
Pour accéder au menu de sélection, il suffit de cliquer sur la petite flèche devant « Télécharger
depuis votre ordinateur »
Il faut ensuite sélectionner la vidéo voulue et cliquer sur
« choisir ».
Votre fichier est alors attaché à l’article avec un nouveau numéro.
Il faudra donc l’inclure avec la balise correspondante :
<docX|player|center> (voir point 2 méthode 1)
Equipe TICE 84
3
Méthode 3 : C’est la méthode utilisée sous Guppy
(les anciens sites…)
1) Installation d’un lecteur Flash-FLV dans un répertoire du site
Nous utiliserons le lecteur FLV de Neolao qui est gratuit et qui possède une documentation en français !
Ce lecteur existe en cinq versions, nous utiliserons la version dite « Normal »
Pour plus d’info : http://flv-player.net/
Télécharger le lecteur à cette adresse :
http://flv-player.net/medias/player_flv.swf
Une fois le fichier « player_flv.swf » sur votre ordinateur il faut l’uploader sur le site internet à l’aide de
FileZilla. Cette opération n’est à faire qu’une seule fois ! (Tutoriel et téléchargement)
Bien évidement il faut placer le lecteur dans un répertoire qui sera accessible lorsque vous serrez dans Spip.
Je vous conseille donc que le placer dans le dossier IMG puis FLV : « /www/appli/spip/IMG/flv »
2) Téléchargement de la vidéo dans un répertoire du site
Toujours avec FileZilla vous allez maintenant uploader vos vidéos. Afin que la procédure soit plus facile
par la suite il faut placer vos vidéos dans le même répertoire que le lecteur, donc dans le dossier IMG puis
FLV : « /www/appli/spip/IMG/flv »
3) Rédaction de l’article
Pour rédiger votre article vous allez passer en mode WYSIWYG (« Ce que tu vois c’est ce que tu auras »)
en cliquant sur ce bouton
Rédigez votre article et placez ensuite le curseur à l’endroit où vous souhaitez insérer votre vidéo.
Il faut ensuite passer en mode source en cliquant sur le bouton « source » en haut à droite de vos barres
d’outils
<div align="center ><br />
<div align="center"><embed src="http://www.ec-lioux.ac-aixmarseille.fr/spip/IMG/flv/flvplayer.swf?file=Guerredesetoiles.flv"
width="640" height="480" type="application/x-shockwave-flash"
quality="high"></embed></div>
Puis copier-coller le code ci-contre
</div>
Il faut enfin modifier les adresses en jaune afin qu’elles correspondent à votre site et définir la taille
d’affichage de la vidéo. Si vous mettez une taille inférieure ou égale à celle de la vidéo vous obtiendrez une
vidéo de bonne qualité. Par contre si vous voulez afficher une petite vidéo en grande taille la qualité sera
dégradée !
4) D’autres options
Ce lecteur existe sous différentes formes et quelques éléments sont paramétrables.
Je vous invite, si vous vous en sentez capable, à visiter le site dédié à ce lecteur. Vous y trouverez beaucoup
d’infos : http://flv-player.net/
Equipe TICE 84
4