Créer un Epub
Ajouter des données multimédias
Le passage du papier au numérique ouvre la porte à l'intégration dans vos ouvrages de contenus multimédia, c'est-à-dire de sons et de vidéos ainsi que des options d'interactivité. Le standard EPUB 3 le permet. Si vous souhaitez créer des epubs de ce type, il faudra prendre une attention particulière à bien cibler le public et les prérequis techniques, car de nombreux périphériques de lecture ne les prennent pas en charge malgré les recommandations. Les raisons de cette réticence sont simples :
- la vidéo est lourde donc longue à télécharger ;
- la vidéo est lourde et demande des puissances de calculs, ce qui a tendance à vider rapidement les batteries ;
- le fonctionnement des options d'interaction est variable selon les périphériques (survol disponibles sur ordinateurs, mais pas sur tablette ...) ;
- les bonnes pratiques concernant la vidéo ne sont pas évidentes et ne viennent pas tempérer les contre-arguments précédents.
Jusqu'à présent, aucun outil dédié spécifiquement à la création d'epub ne permet d'intégrer automatiquement des données multimédias complètes.
Pour les logiciels de lecture qui ne supportent pas la vidéo, ils sont incités à présenter au lecteur le fait que celui-ci n'aura pas accès à l'intégralité du contenu du livre. FBReader affiche par exemple ce message conformément à ce que les créateurs du fichier ont demandé :
Your Reading System does not support (this) video. <video id="video1"autoplay="" role="button" aria-controls="video1" controls=""> <source src="#/video/shared-culture.mp4" type="video/mp4"></source> <source src="#/video/shared-culture.webm" type="video/webm"></source> <track src="#/captions/cc-en.vtt" srclang="en" kind="subtitles" label="English"></track> <track src="#/captions/cc-fr.vtt" srclang="fr" kind="subtitles" label="Français"></track> </video>
Que ce soit du côté du lecteur comme du créateur de fichier, les choses vont bien sûr évoluer, mais force est de constater qu'à l'heure actuelle, il vous faudra travailler directement sur les fichiers source de l'epub à l'aide d'éditeurs de texte HTML (lisez les chapitres Mieux comprendre l'epub et Les bases du HTML et du CSS pour l'epub pour les manipulations de base des fichiers).
Formats acceptés
Pour les epub, il existe deux formats multimédias natifs : le MP3 pour le son et le MP4 pour la vidéo (http://idpf.org/epub/30/spec/epub30-publications.html#sec-publication-resources).
Si vous utilisez d'autres formats que le MP3 ou le MP4, ou si l'outil sur lequel sera lu l'epub ne peut pas les lire (c'est le cas le la plupart des liseuses actuelles), votre fichier multimédia sera remplacé par une icône ou un texte par défaut. Afin de fournir au lecteur une information plus substantielle, il est recommandé d'intégrer dans tous les cas pour chaque fichier multimédia un fichier alternatif (fallback) dans un format standard : une image (pour les vidéos) et une description textuelle (pour les fichiers son comme vidéo) sont conseillées (http://idpf.org/epub/30/spec/epub30-publications.html#sec-foreign-restrictions).
Ajouter un élément multimédia
Importer le fichier multimédia
- Ouvrez l'epub dans Sigil.
- Cliquez droit sur le dossier [Divers] (ou [Misc]) dans la structure de l'epub et importez les fichiers multimédias que vous souhaitez inclure.
- Enregistrez et fermez. Les outils actuels d'édition d'epub (tel Sigil) ne supportant pas les spécifications EPUB 3, ils vont "nettoyer" les ajouts que vous aurez apportés dans les fichiers de contenu (HTML, XHTML) sur ces points. Notez aussi que l'aspect des boutons de lecture (lire, pause, arrêt) peut varier selon les logiciels.
La seule alternative consiste pour l'instant à décompresser votre fichier (voir le chapitre Mieux comprendre l'epub dans la section Enrichir son epub) et à travailler dans un éditeur HTML (voir la section Des outils pour façonner le code).
Ajouter de l'audio en codant
Vous voilà dans votre fragment XHTML.
Placez-vous à l'endroit où vous désirez que le morceau audio apparaisse.
Codez par exemple :
<audio id="audio1" src="audio/Suite_Espanola_Op_47_Leyenda.mp3" controls="controls" width="200"/>
Notons que width définit la largeur de la fenêtre audio qui sera présente dans l'epub et que contrôle permet l'affichage des boutons de lancement et d'arrêt de la lecture de son.
N'oubliez pas d'ajouter la référence votre vidéo dans le fichier opf de votre epub :
<item id="audio1" href="audio/Suite_Espanola_Op_47_Leyenda.mp3" media-type="audio/mpeg"/>
Ajouter de la vidéo
Codez par exemple :
<video src="video/sintel_trailer-480p.mp4" controls="controls" width="320" height="240"/>
Une seconde notation incluant l'élément source à la place de l'attribut src permet de définir plusieurs sources pour la même vidéo et ainsi laisser le logiciel de lecture choisir le format le plus approprié pour lui. Attention cependant, car cela alourdit évidemment d'autant les fichiers epub.
<video id="video3" controls="controls" width="320" height="240">
<source src="video/sintel_trailer-480p.mp4" type="video/mp4"/>
<source src="video/sintel_trailer-480p.webm" type="video/webm"/>
<source src="video/sintel_trailer-480p.ogv" type="video/ogg"/>
</video>
Notons que width définit la largeur de la fenêtre vidéo et height sa hauteur.
Dans le content.opf, modifiez :
<item id="video3" href="video/sintel_trailer-480p.mp4" media-type="video/mpeg" />
Si vous utilisez la notation avec plusieurs sources pour le son ou la video, chaque source doit être indiquée dans le fichier opf.
Rezippez votre fichier.
Ne l'ouvrez pas sous Sigil, il nettoiera automatiquement les balises multimédias et vous serez alors obligé de tout recommencer...
Aperçu d'une vidéo dans Readium et dans EpubReader (Firefox) (fichier : http://code.google.com/p/epub-samples/downloads/detail?name=cc-shared-culture-20120130.epub&can=2&q=)
Fallbacks et messages
Fournir un contenu ou message de remplacement pour le cas où votre élément multimédia ne serait pas chargé peut s'avérer important afin de montrer au lecteur qu'il n'a pas accès à une partie de l'information.
Le principe est d'ouvrir la balise audio ou vidéo et d'y insérer des balises contenant textes ou images qui s'afficheront en cas de problème.
<video id="video3" controls="controls" width="320" height="240">
<source src="#/video/sintel_trailer-480p.mp4" type="video/mp4"/>
<source src="#/video/sintel_trailer-480p.webm" type="video/webm"/>
<source src="#/video/sintel_trailer-480p.ogv" type="video/ogg"/>
<div class="errmsg">
<p>Une vidéo ne peut être affichée</p>
</div>
</video>
Ajouter de l'interactivité avec Javascript
Depuis très longtemps, les pages web peuvent être enrichies par diverses techniques. L'une des plus répandues est l'usage du javascript, utilisé dans de nombreux contextes. Le succès de javascript a été tel qu'au fil du temps de nombreuses "librairies", applications évoluées réutilisables, ont été créées. Elles sont en général dédiées à des tâches spécifiques par exemple :
- jquery, pour gérer l'interaction avec le contenu de la page ;
- raphael, pour agir sur les contenus SVG et modifier dynamiquement des graphiques.
L'interactivité était déjà possible avec le standard EPUB 2, mais les orientations EPUB 3 le rende plus utilisable que jamais en posant le multimédia comme une part intégrante du standard. Dans l'exemple qui suit, nous utiliserons Jquery qui est certainement la librairie la plus célèbre en ce moment.
- Téléchargez jquery à l'adresse : http://code.jquery.com/jquery-latest.js. Vous pourrez en trouver ailleurs avec d'autres numéros de version, toutes iront pour notre initiation. Certains sites conseillent de lier votre fichier au site de référence plutôt que de l'importer dans votre projet epub. Nous préférons l'importation, car nous considérons qu'un livre électronique peut être lu sans connexion internet.
- Placez ce fichier téléchargé dans le dossier Misc et ajoutez ce code dans la partie <head> </head> de la page epub :
<script src="#/Misc/jquery-latest.js" type="text/javascript"></script>
- Ensuite, nous préparons les informations de notre page :
<h1>Téléchargez directement un livre !</h1> <ul style="display:inline;style-type:none;position:relative;"> <li class="gimp">Gimp</li> <li class="scribus">Scribus</li> </ul>Regardez bien le nom des class CSS associées à chaque élément de liste li
- Ensuite, ajoutez le code suivant dans la partie head, à nouveau, juste après le code d'insertion du script :
<script type="text/javascript"> //<![CDATA[ $(function(){ $('.gimp').click(function(){ alert('Vous avez choisi Gimp'); }); $('.scribus').click(function(){ alert('Vous avez choisi Scribus'); }); }); //]]></script>
Nous voilà déjà avec un code réactif à l'action sur le texte.
En ajoutant une image qui aurait l'id gimp vous pouvez faire apparaître progressivement votre image en utilisant la ligne
$('#gimp').fadeIn("slow");
au lieu de
alert('Vous avez choisi Gimp');
Validez votre epub
Si vous voulez vendre sur les plateformes Apple ou Amazon, vous devez faire très attention à respecter à la lettre leurs recommandations. Dans le cas contraire, vous risquez de voir votre epub refusé. Pour connaître les procédures de validation d'un epub, rendez-vous à la section Contrôler ses fichiers / Vérifier la validité du fichier.