Comment intégrer vos fichiers hébergés sur une serveur:
chez Free (ou ailleurs !) dans votre blog
chez Free (ou ailleurs !) dans votre blog
Préambule :
- Vos fichiers médias sont stockés chez votre hébergeur et vous avez leur adresse URL de type :
- Vous souhaitez intégrer ces médias (pdf, swf, videos, musique...) dans votre blog !
- Vous devez donc utiliser le code HTML5 (et travailler en mode HTML dans vos articles.)
Voici le code à intégrer avec des explications et, en complément, un article qui présente des exemples avec divers formats de fichiers. Ainsi vous verrez immédiatement le résultat de l’affichage du média ce qui dépend aussi de votre configuration matérielle (pc, tablette...) et logicielle (navigateur...)
Avant tout :
- choisissez bien le nom de vos fichiers distants
Si
vous voulez éviter des problèmes, prenez l'habitude d'enregistrer vos
fichiers avec des noms en minuscules, sans espace ni accent, par exemple
:
mon_image.png
.
Vous pouvez remplacer les espaces par le caractère underscore (« _ »)
- Espacez, dans l’article de votre blog, vos intégrations
mais Blogger n'accepte que le retour à la ligne avec <br />
IMAGE
Vérifier bien la taille de votre image par rapport à l'affichage de votre blog.
1-Les formats image
Toutes les images diffusées sur Internet ont un point commun : elles sont compressées.
Le JPEG
Les images au format JPEG (extension .jpg
ou .jpeg
.)
sont très répandues sur le Web. Ce format est conçu pour réduire le
poids des photos (c'est-à-dire la taille du fichier associé), qui
peuvent comporter plus de 16 millions de couleurs différentes. C'est le format ideal et efficace pour
réduire le poids des photos
Le PNG
Le format PNG (.png) récent est adapté à la plupart des
graphiques ( « à tout ce qui n'est pas une photo
»). Le PNG a deux gros avantages : il peut être rendu transparent et il
n'altère pas la qualité de l'image. Il est devenu le format le plus puissant
pour enregistrer la plupart des images.
Le PNG existe en deux versions, en fonction du nombre de couleurs que doit comporter l'image :
- PNG 8 bits : 256 couleurs ;
- PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG).
Le GIF
C'est
un format ancien, très utilisé. Aujourd'hui, le PNG est globalement bien
meilleur que le GIF : les images sont généralement plus légères et la
transparence est de meilleure qualité.
Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de couleurs). Néanmoins, le GIF conserve un certain avantage que le PNG n'a pas : il peut être animé.
=> N'utilisez pas d'autres formats de fichiers images que jpg/png/gif
2-La balise
<img />
----------------------------------------------------------------------
<img src="ADRESSE" alt="Photo de montagne" />
-----------------------------------------------------------------------
A savoir :
alt
: cela signifie « texte alternatif ». On doit toujours indiquer un texte alternatif à l'image.Autres possibilités:
Ajouter une infobulle : L'attribut permettant d'afficher une bulle d'aide est le même que pour les liens : il s'agit de
title
. Cet attribut est facultatif.
src="
ADRESSE" alt="Photo de montagne" title="C'est beau quand même !"
- Miniature cliquable
Si
votre image est très grosse, il est conseillé d'en afficher la
miniature sur votre site. Ajoutez ensuite un lien sur cette miniature
pour que vos visiteurs puissent afficher l'image en taille originale. Utiliser le freeware Easy Thumbnails.
On suppose que les 2 images soient dans le même dossier.href="ADRESSE grande image" src="ADRESSE miniature" alt="Photo de montagne" title="Cliquez pour agrandir"
=> VOIR UN ARTICLE avec intégration de divers fichiers "image"
(Attention, le résultat dépend de votre configuration matérielle (PC, tablette...) et logicielle (navigateur...)
AUDIO
1-Les formats audio
Pour
diffuser de la musique ou duson, il existe de nombreux
formats. La plupart d'entre eux sont compressés ce qui permet de réduire leur poids :
- MP3 :le plus vieux et l'un des plus compatibles (tous les appareils savent lire des MP3), ce qui fait qu'il est toujours très utilisé aujourd'hui.
- AAC : utilisé majoritairement par Apple sur iTunes, c'est un format de bonne qualité. Les iPod, iPhone et autres iPad savent les lire sans problème.
- OGG : le format Ogg Vorbis est très répandu dans le monde du logiciel libre, notamment sous Linux. Ce format a l'avantage d'être libre, c'est-à-dire qu'il n'est protégé par aucun brevet.
- WAV (format non compressé) : évitez autant que possible de l'utiliser car le fichier est très volumineux avec ce format. C'est un peu l'équivalent du Bitmap (BMP) pour l'audio.
=>Aucun navigateur ne gère tous ces formats à la fois. Privilégiez MP3 et OGG :
2-La balise
<audio>
- Un seul fichier audio est proposé
-----------------------------------------------------------------------------
src="ADRESSE" controls Votre navigateur n'est pas à jour !
-----------------------------------------------------------------------------
Vous pouvez compléter la balise des attributs suivants :
controls
: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. indispensablewidth
: pour modifier la largeur de l'outil de lecture audio.loop
: la musique sera jouée en boucle.autoplay
: la musique sera jouée dès le chargement de la page. Évitez d'en abuser, c'est en général irritant d'arriver sur un site qui joue de la musique tout seul !preload
: indique si la musique peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs :auto
(par défaut) : le navigateur décide s'il doit précharger toute la musique, uniquement les métadonnées ou rien du tout.metadata
: charge uniquement les métadonnées (durée, etc.).none
: pas de préchargement. Utile si vous ne voulez pas gaspiller de bande passante sur votre site.
- Plusieurs formats du fichier audio afin que le navigateur prenne automatiquement le format qu'il reconnaît.
------------------------------------------------------------
=> VOIR UN ARTICLE avec intégration de divers formats de fichiers "Audio"
(Attention, le résultat dépend de votre configuration matérielle (PC, tablette...) et logicielle (navigateur...)
VIDEO
1-Les formats vidéo
Le stockage de la vidéo est autrement plus complexe. On a besoin de trois éléments :
- Un format conteneur : c'est un peu comme une boîte qui va servir à contenir les deux éléments ci-dessous. On reconnaît en général le type de conteneur à l'extension du fichier : AVI, MP4, MKV…
- Un codec audio : c'est le format du son de la vidéo, généralement compressé. Nous venons de les voir, on utilise les mêmes : MP3, AAC, OGG…
- Un codec vidéo : c'est le format qui va compresser les images. C'est là que les choses se corsent, car ces formats sont complexes et on ne peut pas toujours les utiliser gratuitement. Les principaux à connaître pour le Web sont :
- H.264 : l'un des plus puissants et des plus utilisés aujourd'hui… mais il n'est pas 100% gratuit. En fait, on peut l'utiliser gratuitement dans certains cas (comme la diffusion de vidéos sur un site web personnel), mais il y a un flou juridique qui fait qu'il est risqué de l'utiliser à tout va.
- Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que H.264. Il est bien reconnu sous Linux mais, sous Windows, il faut installer des programmes pour pouvoir le lire.
- WebM : un autre codec gratuit et libre de droits, plus récent. Proposé par Google, c'est le concurrent le plus sérieux de H.264 à l'heure actuelle.
=>Les iPhone, iPad et iPod ne reconnaissent à l'heure actuelle que le format H.264 (fichier
.mp4
) et uniquement si celui-ci apparaît en premier dans la liste ! =>Donc le format H.264 est fortement recommandé en mp42-La balise <video>
----------------------------------------------------------------src="ADRESSE" controls width="600"
Votre navigateur n'est pas à jour !
---------------------------------------------------------------
A noter que la vidéo ne démarre pas automatiquement
Vous pouvez compléter la balise des attributs suivants (la plupart sont les mêmes que pour la balise
<audio>
) :poster
: image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur prend la première image de la vidéo mais, comme il s'agit souvent d'une image noire ou d'une image peu représentative de la vidéo, je vous conseille d'en créer une ! Vous pouvez tout simplement faire une capture d'écran d'un moment de la vidéo.controls
: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. indispensable!width
: pour modifier la largeur de la vidéo.height
: pour modifier la hauteur de la vidéo.loop
: la vidéo sera jouée en boucle.autoplay
: la vidéo sera jouée dès le chargement de la page. Là encore, évitez d'en abuser, c'est en général irritant d'arriver sur un site qui lance quelque chose tout seul !preload
: indique si la vidéo peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs :auto
(par défaut) : le navigateur décide s'il doit précharger toute la vidéo, uniquement les métadonnées ou rien du tout.metadata
: charge uniquement les métadonnées (durée, dimensions, etc.).none
: pas de préchargement. Utile si vous souhaitez éviter le gaspillage de bande passante sur votre site.
=> A savoir:
- On ne peut pas forcer le préchargement de la vidéo, c'est toujours le navigateur qui décide.
-Les
proportions de la vidéo sont toujours conservées. Si vous définissez
une largeur et une hauteur, le navigateur fera en sorte de ne pas
dépasser les dimensions indiquées mais il conservera les proportions.
Vidéo avec des fichiers alternatifs
<video controls width="600">
vous utiliserez la balise
<source>
à l'intérieur de la balise <video>
pour proposer différents formats. Le navigateur prendra celui qu'il reconnaît :----------------------------------------------------
<video controls width="600">
<source src="sintel.mp4">
<source src="sintel.webm">
<source src="sintel.ogv">
Votre navigateur n'est pas à jour
</video
=> VOIR UN ARTICLE avec intégration de divers fichiers vidéo
(Attention, le résultat dépend de votre configuration matérielle (PC, tablette...) et logicielle (navigateur...)
PDF & Flash (.swf)
(Attention, le résultat dépend de votre configuration matérielle (PC, tablette...) et logicielle (navigateur...)
PDF & Flash (.swf)
Il faut utiliser la balise <iframe> ou <embed> ou <object>
Elles permettent d'
afficher et intégrer un document, par exemple un fichier .pdf ou une animation flash de type .swf. Il n'est cependant pas
possible de redimensionner directement le cadre de visualisation.
- Iframe
---------------------------------------------------------------------------------
<iframe name="NOM" src="ADRESSE" height="500px" width="550px">
Votre navigateur ne supporte pas les iframes
</iframe>
--------------------------------------------------------------------------------------------
<iframe name="NOM" src="ADRESSE" height="500px" width="550px">
Votre navigateur ne supporte pas les iframes
</iframe>
--------------------------------------------------------------------------------------------
Vous pouvez compléter la balise des attributs suivants:
frameborder | Détermine si la bordure de l'iframe sera visible Valeur 0 / 1 |
height / width Hauteur /largeur du cadre de l'iframe Valeur px / %
marginheight marginwidth |
Défini les marges horizontales et verticales par rapport à l'iframe | Valeur px |
name | Nom donné à l'iframe Valeur : | Texte |
scrolling | Définit la visibilité des scrollbars dans l'iframe | (par défautsont visibles) Valeur | auto : yes no |
- Embed
La balise <embed> permet de définir un conteneur pour l'affichage d'applications externes telles que des plug-in
ou de contenus interactifs (animations flash .swf , documents .pdf ...).
=>Si cette balise n'est pas aux normes actuelles du xhtml, elle est désormais aux normes du HTML5 !
--------------------------------------------------------------------------
<embed width="480px" height="360px" src="ADRESSE.swf" type="application/x-shockwave-flash" />
-------------------------------------------------------------------------------------
Vous pouvez compléter la balise des attributs suivants:
height | Hauteur de l'élément affiché | px |
src | URL du | URL |
type | Type MIME du contenu rendu par la balise embed | |
width | Largeur de l'élément affiché | px |
- Object
La balise <object> permet permet d'insérer du contenu multimédia dans une page web
(images, animations, programmes, fichiers audio et vidéo, etc...) ainsi que des documents (html, pdf ...)
en se basant sur des plug-ins ou des contrôles ActiveX (propres à IE).
Il est possible de spécifier des informations au sein de la balise <object> pour paramétrer
le contenu en utilisant la balise <param>.
=>VOIR un article qui teste divers fichiers media avec la balise object
(Attention, le résultat dépend de votre configuration matérielle (PC, tablette...) et logicielle (navigateur...)
Vous pouvez compléter la balise des attributs suivants:
Propriétés | Définition | Valeurs |
---|---|---|
codetype | Indique le type MIME du media affiché dans la balise object | text/html application/pdf video/quicktime video/x-ms-wmv audio/basic |
data | indique le chemin de la ressource à employer par la balise object | URL |
height / width | Hauteur et largeur de l'objet
Appliquer les styles css pour un rendu similaire |
px % |
name | Référence au nom de l'objet dans le document | Texte |
type | Spécifie le type MIME du contenu affiché | type MIME |
-------------------------------------------------------------
<object data="ADRESSE video" style="height: 400px; width: 640px;"></object>---------------------------------------------------------------------------------------------
=> VOIR UN ARTICLE avec intégration de PDF
=> VOIR UN ARTICLE avec intégration d'animation Flash .swf
(Attention, le résultat dépend de votre configuration matérielle (PC, tablette...) et logicielle (navigateur...)
COMPLEMENTS:
- DIVERS TESTS de MEDIAS
A SAVOIR : TOUS LES MEDIAS (son, video, swf, pdf...) peuvent aussi utiliser ces balises !
Attention, le résultat dépend de votre configuration matérielle (PC, tablette...) et logicielle (navigateur...)
(Attention, le résultat dépend de votre configuration matérielle (PC, tablette...) et logicielle (navigateur...)
- COMPRENDRE LES BALISES UTILISÉES
Voir le DOSSIER "Balises HTML 5"