• ACCUEIL
  • blogger

    Intégrer vos fichiers hebergés sur un serveur via code html5

    Comment intégrer vos fichiers hébergés sur une serveur:
     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 : 
                               http://monsite.free.fr/video/mavideo.mp4
    • 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.

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

    <a href="ADRESSE grande  image"><img src="ADRESSE miniature" alt="Photo de montagne" title="Cliquez pour agrandir" /></a>



    => 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é
    -----------------------------------------------------------------------------
    <audio src="ADRESSE" controls>Votre navigateur n'est pas à jour !</audio>

    -----------------------------------------------------------------------------
    Vous pouvez compléter la balise des attributs suivants :
    • controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. indispensable
    • width : 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.
    -----------------------------------------------------------
    <audio controls>
    <source src="ADRESSE.mp3">
    <source src="ADRESSE.ogg">
    </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...)




    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.
    =>Aucun navigateur ne gère tous ces formats à la fois.
    =>
    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 mp4

    2-La balise <video>
    ----------------------------------------------------------------
    <
    video src="ADRESSE" controls width="600">
       Votre navigateur n'est pas à jour ! </video> ---------------------------------------------------------------
    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
    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)
    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
    Spécifie un cadre intégré, mais tous les  navigateurs ne supportent pas les iframes. Nota: c'est la balise utilisée par Youtube et DailyMotion  dans le code fourni pour intégrer leurs vidéos.
     ---------------------------------------------------------------------------------
     <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...)