Balises HTML5

Balises  HTML 5  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 qu'il est conseillé d'utiliser) 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