• ACCUEIL
  • blogger

    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