Créer un Blog avec Blogger

Balises HTML5

Balises  HTML5  utiles dans un blog :
object / iframe /embed / audio / video

Pour insérer dans les articles  du blog divers médias stockés sur des espaces personnels, il est utile de connaître les diverse balises utilisables qui ont chacune leur spécificité et complexité ! De plus leur polyvalence (embed/iframe/object) fait qu'elles sont parfois interchangeables (voir les exemples) et qu'il est délicat de savoir laquelle choisir d'autant que les normes évoluent.

Pour ceux qui veulent  simplifier sans approfondir :
-utiliser <audio> et <video> pour musique (mp3) et vidéo (mp4)
-utiliser <iframe> pour les .pdf et animation Flash.swf

N'oubliez pas de faire précéder et suivre vos balises par <br />
1-BALISE <OBJECT>

La balise standardisée <object> définit un objet multimédia encapsulé à l'intérieur d'un document HTML. Cet élément est donc utilisé pour insérer/encapsuler des fichiers multimédia (audio, vidéo, Java applets, ActiveX, PDF ou Flash) dans vos pages web (et articles blogger)

Elle remplace, en principe,  la balise <embed>  [Voir partie 3]

Toutefois, la balise <object> "généraliste" peut être aussi remplacée par les balises spécifiques (HTML5) <audio> et <video> qui sont plus simples à gérer   (pas de type...) [Voir partie 4 et 5]

On doit spécifier  :
  • l'attribut type  en indiquant le type mime
    = identifiant de format de données sur internet en deux parties: type et sous-type
    ex:
      application/pdf    audio/mpeg    video/mp4
  • la source du document avec l'attribut data en indiquant son URL. 
Exemple 
<object type="application/sonnom" data="ADRESSE" width="PIXELS" height="PIXELS">
value="ADRESSE" /></object>

Exemple (fichier pdf) :

<object data="adresse URL.pdf" type="application/pdf" width="300" height="200">
  alt : <a href="adresse URL.pdf">test.pdf</a>
</object>
 
  • Paramètre: À l'intérieur de cette balise, on peut également ajouter des paramètres qui modifient certaines propriétés de l'objet inséré.
   Syntaxe :     <param name="nom_paramètre" value="valeur_du_paramètre" />

Exemple (fichier wav) :

<object type="audio/x-wav" data="adresse URL.wav" width="300" height="200">
  <param name="src" value="adresse URL.wav">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
  alt : <a href="adresse URL.wav">test.wav</a>
</object>



Attribut
Valeur
Description (attribut déprécié)
align
top
bottom
middle
left
right
Désapprouvé. Utilisez les styles à la place.
Spécifie l'alignement de l'élément <object> en fonction des éléments avoisinants
archive
URL
Un liste séparée par des espaces d'adresse URL à archiver Les archives contiennent des ressources en rapport avec l'objet.
border
pixels
Désapprouvé. Utilisez les styles à la place.
Spécifie la largeur de la bordure autour d'un <object>
classid
class_ID
Définit une valeur de classe ID comme stock dans les Registres Windows ou une adresse URL
codebase
URL
Définit où trouver le code pour l'objet
codetype
MIME_type
Le type de média internet dont le code est fournit par l'attribut classid
data
URL
Spécifie l'adresse URL de la resource qui doit être utilisée par le projet
declare
declare
Définit que l'objet ne doit pas être déclaré, pas être créé ni instancié tant que ce n'est pas nécessaire
height
pixels
Spécifie la hauteur de l'objet
hspace
pixels
Désapprouvé. Utilisez les styles à la place.
Spécifie l'espacement sur la gauche et la droite de l'objet
name
nom
Spécifie un nom pour l'object
standby
texte
Définit un texte à afficher pendant quel'objet est chargé
type
type_MIME
Spécifie le type MIME des données spécifiées dans l'attribut data
usemap
#nom_carte
Spécifie le nom d'un carte d'images du côté du client qui doit être utilisée avec l'objet
vspace
pixels
Désapprouvé. Utilisez les styles à la place.
Spécifie l'espacement en haut et en bas de l'objet
width
pixels
Spécifie la largeur de l'objet


EXEMPLE pour swf
 <object type="application/x-shockwave-flash" data="ADRESSE
width="PIXELS" height="PIXELS">
        <param name="movie" value="ADRESSE"/>
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
<p>Installez le plugin Flash pour voir l'animation : <a href="http://www.adobe.com/go/gntray_dl_getflashplayer_fr" title="LienPlugin">Cliquez ici pour le télécharger</a></p></object>
 




 CODE pour intégrer les principaux fichiers multimédias 
 
Le code peut donc s'avérer complexe... 
Voici donc quelques exemples pour les médias usuels:
Pour les autres voir ce site
 
PDF
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
  alt : <a href="data/test.pdf">test.pdf</a> 
 SWF
<object type="application/x-shockwave-flash" data="data/test.swf" width="320" height="240">
  <param name="movie" value="data/test.swf">
  <param name="loop" value="false">
  alt : <a href="data/test.swf">test.swf</a>
</object>
</object>

AUDIO

Mp3
<object type="audio/mpeg" data="data/test.mp3" width="200" height="20">
  <param name="src" value="data/test.mp3">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
  alt : <a href="data/test.mp3">test.mp3</a>
</object>

Ogg
<object type="application/ogg" data="data/test.ogg" width="200" height="20">
  <param name="src" value="data/test.ogg">
  alt : <a href="data/test.ogg">test.ogg</a>
</object>

Mid
<object type="audio/x-midi" data="data/test.mid" width="200" height="20">
  <param name="src" value="data/test.mid">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
    alt : <a href="data/test.mid">test.mid</a>
</object>

Wav
<object type="audio/x-wav" data="data/test.wav" width="200" height="20">
  <param name="src" value="data/test.wav">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
  alt : <a href="data/test.wav">test.wav</a>
</object>

VIDEO

MPG
<object data="data/test.mpg" type="video/mpeg" width="320" height="255">
  <param name="src" value="data/test.mpg">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
  alt : <a href="data/test.mpg">test.mpg</a>
</object>

MP4
<object data="data/test.mp4" type="video/mp4" width="320" height="255">
  <param name="src" value="data/test.mpg">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
  alt : <a href="data/test.mpg">test.mpg</a>
</object>

AVI
<object data="data/test.avi" type="video/x-msvideo" width="320" height="255">
  <param name="src" value="data/test.avi">
  <param name="autoStart" value="0">
  alt : <a href="data/test.avi">test.avi</a>
</object>

WMV
<object type="video/x-ms-wmv" data="data/test.wmv" width="320" height="255">
  <param name="src" value="data/test.wmv">
  <param name="autoStart" value="0">
  alt : <a href="data/test.wmv">test.wmv</a>
</object>


QuickTime

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        codebase="http://www.apple.com/qtactivex/qtplugin.cab"
        width="320" height="255">
  <param name="src" value="data/test.mov" >
  <param name="controller" value="true" >
  <param name="autoplay" value="false">

  <object type="video/quicktime" data="data/test.mov" width="320" height="255">
    <param name="controller" value="true" >
    <param name="autoplay" value="false">
   alt : <a href="data/test.mov">test.mov</a>
  </object>
</object>

 
 
 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...)

 
  
2- Balise <IFRAME>

iframe signifie "inline frame", en français "cadre en ligne", et spécifie un cadre intégré
utilisé pour incruster un document à l'intérieur du document HTML courant.  
Donc, elle se comporte comme un conteneur qui n'est cependant pas 
possible de redimensionner directement. 
      
 
Exemple:
 
<iframe  src="ADRESSE URL" 
height="600" width="400">
Votre navigateur ne supporte pas les iframes
</iframe>
     
 
 
Attributs optionnels
Valeur
Description
align
left
right
top
middle
bottom
Désapprouvé. Utilisez les styles à la place.
Spécifie l'alignement d'un cadre intégré par rapport aux éléments environnants.
frameborder
1
0
Spécifie s'il faut ou non afficher les bordures autour du cadre intégré
height
pixels
%
Spécifie la hauteur d'un cadre intégré
longdesc
URL
Spécifie une page qui contient une description détaillée du contenu du cadre intégré
marginheight
pixels
Spécifie les marges du haut et du bas du contenu d'un cadre intégré
marginwidth
pixels
Spécifie les marges de gauche et de droite du contenu d'un cadre intégré
name
nom
Spécifie le nom d'un cadre intégré
scrolling
yes
no
auto
Spécifie s'il faut ou non afficher les ascenseurs dans un cadre intégré
src
URL
Spécifie l'adresse du document à afficher dans le cadre intégré
width
pixels
%
Spécifie la largeur d'un cadre intégré


Attribut standards
Valeur
Description
class
nom_classe
Spécifie un nom de classe pour un élément
id
id
Spécifie un unique id pour un élément
style
définition_style
Spécifie un style en-ligne pour un élément
title
texte
Spécifie une information supplémentaire à propos d'un élément

 
 
 Exemple
<IFRAME src="ADRESSE URL"
 width=600 height=200 
scrolling=auto frameborder=1 > 
</IFRAME>
 

VOIR UN ARTICLE avec intégration de vidéo  mp4 avec embed et iframe


VOIR UN ARTICLE avec intégration de divers fichiers vidéo avec embed et iframe

(Attention, le résultat dépend de votre configuration matérielle (PC, tablette...) et logicielle (navigateur...)

 
3-Balise <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, documents pdf html ...).

La balise <embed> a été déconseillée en HTML 4 en faveur de la balise <object>, mais elle a été rajoutée dans la spécification HTML 5.

Exemple (animation Flash)

<embed src="ADRESSE URL.swf" />


La balise <embed> prend en charge tous les attributs standard en HTML5et tous les attributs d’événement HTML5.

Propriétés pour la balise embed :

Propriétés Définition Valeurs
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
 
Exemple
<embed width="480px" height="360px" src="ADRESSE URL.swf"  /> 
 
 
 
4- Balise <AUDIO>

 La balise <audio> (nouvelle balise HTML5) permet de lire des fichiers sons ou des flux audio directement dans un article ou  page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause et contrôle du volume.

Elle se présente ainsi:

<audio src="URLdufichiermp3" controls>Veuillez mettre à jour votre navigateur !</audio>

L'on peut ajouter des propriétés à cette balise:

Propriétés Définition Valeurs
autoplay Le fichier son doit être lu automatiquement lorsqu'il est chargé autoplay

controls


Affiche le lecteur audio avec ses  fonctionnalités (lecture, pause, volume ...)
controls
loop Le fichier son doit être joué en boucle loop

preload

Spécifie un préchargement du fichier son à l'ouverture de la page
auto
metadata
none

src
URL du fichier son qui sera lu URL


ex

<audio src="URLduFICHIER.mp3" controls autoplay loop>
</audio>

 A savoir:

  • On ne peut pas forcer le préchargement de la musique, c'est toujours le navigateur qui décide. Les navigateurs mobiles, par exemple, ne préchargent jamais la musique pour économiser la bande passante (le temps de chargement étant long sur un portable).

Ex:
<audio src="URLduFICHIER.mp3" controls preload="none">
</audio>

  • La balise <source> permet de définir au sein de l'élément <audio> plusieurs ressources alternatives au cas où le navigateur ne supporterai pas le format initialement spécifié dans l'attribut "src" (il faut alors supprimer l'attribut "src" et spécifier les différents fichiers par ordre de priorité dans les balises <source>). 

 Exemple

<audio controls="controls">
   <source src="URLduFICHIER.mp3" type="audio/mp3" />
   <source src="URLduFICHIER.ogg" type="audio/ogg" />
   Votre navigateur ne supporte pas le tag <audio>.
</audio> 
 


=> 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...)

 
5- Balise <video>

La balise <video> (nouvelle balise HTML5) permet de lire des fichiers ou des flux vidéo directement dans la page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause, positionnement dans la vidéo et contrôle du volume. Lorsque le fichier vidéo n'est pas trouvé ou que son format n'est pas supporté, le lecteur n'est pour certains navigateurs pas visible.

La balise <source> permet de définir au sein de l'élément <video> plusieurs ressources alternatives au cas où le navigateur ne supporterai pas le format initialement spécifié dans l'attribut "src" (il faut alors supprimer l'attribut "src" et spécifier les différents fichiers par ordre de priorité dans les balises <source>).  

<video src="adresseURL" controls poster="image.jpg" width="600"></video>

Propriétés pour la balise video

Propriétés Définition Valeurs
autoplay Indique que le fichier vidéo doit être lu automatiquement lorsqu'il est chargé autoplay
controls Affiche les différentes fonctionnalités du lecteur (lecture, pause, volume ...) controls
loop Indique au lecteur de lire la vidéo en boucle loop
muted Indique au lecteur de désactiver le son de la vidéo muted
poster Spécifie une image par défaut à afficher comme arriére plan du lecteur tant que la vidéo n'est pas lancée URL
preload Spécifie le mode de chargement du fichier vidéo à l'ouverture de la page auto
metadata
none
src URL du fichier vidéo qui sera lu URL




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.


-pour proposer différents formats vidéo
vous utiliserez la balise <source> à l'intérieur de la balise <video> 
Le navigateur prendra celui qu'il reconnaît :

<video controls poster="image.jpg" width="600">
    <source src="ADRESSE URL.mp4">
    <source src="ADRESSE URL.webm">
    <source src="ADRESSE URL.ogv">
</video>




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 ! 

Conseil: stocker ses vidéos au format .mp4








------------------------




SOURCES
openclassrooms. pour video et audio
openclassrooms html5-et-css3
Startyourdev
Balises HTML 
Test des balises 
Générateur de code (ex lecteur vidéo) 
Audio 
joliclic pour la  balise object