Incorporer un extrait vidéo

Vous trouverez dans cette section les informations nécessaires afin de permettre le visionnement d'un court extrait vidéo en continu à partir d'une page de votre site Web. Nous assumons que cet extrait vidéo a été réalisé avec votre appareil numérique (caméra photo ou vidéo , Web caméra, téléphone portable).

Vidéo Démonstration étape par étape du traitement

L'opération consiste à sélectionner un fichier source (aux formats AVI, Quicktime, MPEG, JPEG et WMV) de l'encoder en format vidéo flash, de prépaper votre page Web afin que cet extrait lu avec un lecteur vidéoflash par les visiteurs de votre site

Accessibilité et vidéo

Il est important de savoir que le choix d'inclure des extraits vidéo n’est pas la façon la plus universelle de présenter du contenu sur Internet :

  • Une connexion Internet rapide est nécessaire
  • La consultation d'un extrait vidéo est souvent inaccessible pour les personnes ayant certains handicaps (L'activation du lecteur flash n'est pas possible par les logiciels de synthèse vocale utilisés par les personnes aveugles et les personnes sourdes n'auront accès qu'au visuel)

Procédure et compétences

Résumé de la procédure

  • Téléchargement des applications (encodeur flash RIVA, lecteur flash JW) et des autres fichiers utilisés pour la préparation de l’extrait et la lecture par les visiteurs du site
  • Identification du format original d’encodage utilisé lors de l'enregistrement initial de l'extrait vidéo
  • Transfert de l’extrait en format Flash
  • Organisation et personnalisation des fichiers utilisés
  • Personnalisation du code HTML à intégrer dans la page web
  • Téléversement des fichiers sur l’hébergeur du site

Note : Nous utilisons l'approche sans intermédiaire (solution "You Tube") permettant une plus grande autonomie de gestion du contenus en déposant tout le matériel nécessaire sur votre hébergeur de sites.

Compétences nécessaires

  • Connaître le traitement de pages Web avec un éditeur HTML tel que Nvu ou Komposer
  • Être à l'aise avec le téléversement de fichiers sur l'hébergeur de sites (logiciel FTP)
  • Être familier avec la gestion de dossiers et de fichiers
  • et finalement, c'est un atout d'avoir déjà intégré du contenu en mode « source » dans une page Web

Installation initiale

Convention

Tout au long de la procédure, nous allons utiliser les conventions suivantes dans les exemples de démonstration :

  • Dossier "mon-site" = dossier du site web en construction
  • Fichier "extrait-video.mov" = fichier vidéo en format original d'enregistrement
  • Fichier "extrait-video.flv" = fichier vidéo en format flash suite au réencodage par le logiciel RIVA
  • Fichier "titre.jpg" = Image identifiant l'extrait vidéo s'affichant dans la fenêtre du lecteur JW (lecteur flash)
  • Fichier "video.html" = Page web dans laquelle s'affiche l'extrait vidéo (conference.flv)

Téléchargement des logiciels

Cette procédure s'applique seulement si vous ne possédez sur votre poste de travail les logiciels Riva FLV encoder 2.0 (encodeur flash) et les fichiers du JWplayer (lecteur flash) .

Encodeur Riva FLV Encoder 2.0

  • A partir de la page d'accueil de RIVA, localiser le lien permettant de téléverser le logiciel gratuit (Free Riva FLV Encoder 2.0) .
  • Installer le logiciel sur votre poste de travail
  • Lors de l'installation la fenêtre suivante , décochez "Ouvrez Fichier FLV avec RivaFLV Player"

Figure 1 : fenêtre s'affichant lors de l'nstallation de RIVA encoder FLV

Lecteur flash (site jwplayer)

  • Télécharger le fichier jwplayer.zip
  • Extraire les deux fichiers swobject.js et player.swf
  • Placer ces fichiers dans le dossier principal de votre site Web (exemple "mon-site")

Note :La licence creativecommons du lecteur JWplayer nous permet de le distribuer directement à partir de notre site. Vous pouvez utiliser le lecteur jwplayer sur votre site pour un usage non-commercial.

Pour un usage commercial visitez le site du concepteur Longtail video pour acquérir la licence.logo longtail
 

Encodage en format flash pour le Web

ProcédureRéencodage d'un extrait vidéo en format flash (FLV)

Etape 1 : Identification du format original de votre extrait vidéo

La façon la plus simple de consulter les propriétés d'un fichier afin d'en vérifier les propriétés est de positionner le pointeur de la souris pour quelques instants sur le fichier (Une légende s'affichera identifiant le type et la taille).

Figure 2 : Format de l'extrait vidéo original

Les formats vidéos les plus courant sont MOV, AVI, ...

Aide-mémoireAssurez-vous que le nom de votre fichier video respecte les règles de création de fichiers pour le Web (pas de caractère accentué, ni d’espace blanc ni de majuscules tel qu'indiqué à la page Web "Édition des pages".

Étape 2 : Encoder votre extrait original en format Flash

  • Ouvrir l'encodeur RIVA (figure3)
  • Dans l'encadré <Entrée>, localiser (bouton Parcourir) et choisir le fichier original à encoder (exemple "extrait-video.mov")
  • Dans l'encadré <Sortie>, choisir la destination d'enregistrement du fichier une fois encodée c'est-à-dire le dossier principal de votre site en construction (exemple dossier "mon-site")
  • Dans l'encadré <Encodage> , cliquer sur LE BOUTON < FLV Encoder>

Note : Il n'est pas nécessaire de modifier les préférences par défaut des encadrées de droite (< Configuration>, <Vidéo>, <Audio>)

Figure 3 : Fenêtre d'encodage de RIVA

  • Une fois le nouveau fichier encodé créé , l'encadré affichera "Encoding successful! (figure 4). La durée de cette oprération dépend e la longueur de votre fichier vidéo original.

Figure 4 : Encodage terminé

Etape 3 - Image de présentation

Optionnel : Vous pouvez utiliser une image (photo ou titre ) pour présenter l’extrait vidéo. Dans notre exemple l'image de présentation se nomme "titre.jpg".

Aide-mémoireAssurez-vous que le nom et la taille de votre image de présentation respecte les règles de création de fichiers pour le Web tel qu'indiqué à la page Web "Édition des pages". Déposer ce fichier au même endroit que l'extrait vidéo en flash (dans le dossier principal de votre site en construction).

Inclusion d'un extrait en flash

ProcédureCréation de la page Web intégrant la lecture de l'extrait vidéo

  • Créer un nouvelle page dans l'éditeur (video.html) avec l’éditeur Nvu
  • Choisir l’onglet <source> de l’éditeur Nvu plutôt que l'onglet "Normal"
  • Localiser la balise <body> et copier et coller le texte de l'encadré ci-bas
  • Adapter les textes en gras : Texte de présentation de l'extrait (le texte qui s'affiche au-dessus de la fenêtre du lecteur, extrait-video.flv (extrait vidéo en format flash) et titre.jpg (image de présentation) en fonction de vos fichiers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html;charset=ISO-8859-1"
http-equiv="Content-Type">
<title>Extrait vid&eacute;o</title>
</head>
<body>
<h1><font face="Arial">Texte de présentation de l'extrait</font></h1>
<div id="lecteurjw"><font face="Arial">Vous
devez avoir <a href="http://www.macromedia.com/go/getflashplayer">Flash</a>
install&eacute; et le Javascript du navigateur activ&eacute;
pour lire ce vid&eacute;o.</font></div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("player.swf","ply","540","380","9","#FFFFFF");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");
s1.addParam("flashvars","file=extrait-video.flv&image=titre.jpg&autostart=false");
s1.write("lecteurjw");
</script><br>

</body>
</html>

Glossaire

Lecture en continu (en anglais Streaming) : Ce principe permet la lecture d'un fichier (audio ou vidéo) à mesure qu'il est diffusé Il y a stockage temporaire sur le poste de travail du visiteur . Les données sont téléchargées en continu dans la mémoire vive (RAM), sont analysées à la volée par l'ordinateur et rapidement transférées dans un lecteur multimédia (pour affichage) puis remplacées par de nouvelles données. Elle s'oppose ainsi à la diffusion par téléchargement de fichiers qui nécessite de récupérer l'ensemble des données d'un morceau ou d'un extrait vidéo avant de pouvoir l'écouter ou le regarder. Pour la lecture en continu le stockage est provisoire et n'apparaît pas directement sous forme de fichier sur le disque dur du destinataire. (source: wikipédia)

Format : Les formats d'enregistrement vidéo les plus courant sont AVI pour les PC Windows, MOV et QT (QuickTime) qui à l'origine, QuickTime fut développé uniquement pour les Macintosh, mais aujourd'hui il fonctionne également sous Windows et UNIX. Le format MPG (raccourci de MPEG) qui est indépendant de la plate-forme utilisée, mais nécessite son propre lecteur (source : learnthenet.com)

Logiciel de synthèse vocale : Technique qui transforme un texte en message vocal à la suite d'une conversion des éléments du texte en éléments sonores.