• ACCUEIL
  • blogger

    Vidéos personnelles

    VOS VIDEOS PERSONNELLES

    Préambule:  
    -Vous pouvez avoir des difficultés à visionner vos articles, du moins, les vidéos... Certains navigateurs (leur configuration) peuvent poser problème, en particulier Mozilla Firefox/ IE.
    -Dans tous les cas, tester votre réalisation avec divers navigateurs.
    -Si un navigateur pose problème : le désinstaller complètement 


    Comment insérer  des vidéos personnelles dans vos articles ?

    Il est très simple de mettre en ligne une vidéo (la votre ou toute vidéo publiée sur un site spécialisé)
    Les vidéos personnelles doivent donc être hébergées (sur Youtube ou DailyMotion...). Google possédant Youtube, l'intégration de vidéos Youtube est donc facilitée !

    Voici comment  réaliser simplement l' insertion de  vos vidéos personnelles,  nous verrons comment le réaliser :

    1- à partir de Blogger
    2- en transférant votre vidéo sur Youtube
    3- en transférant votre vidéo sur Google drive
    4- à partir d'une vidéo stockée sur un serveur distant

    A savoir: 
    -En mode "Edition" lorsque la vidéo est insérée dans votre article, elle est inactive : impossible de la lire !
    Il faut publier l'article et le visualiser pour que la vidéo puisse être lue par le navigateur.

    -Vous n'avez pas de vidéo perso pour tester ? télécharger légalement une vidéo sur

    -Site spécial démo : http://www.demo-world.eu/2d-demo-trailers-hd/

    -https://archive.org/details/movies


    -http://commons.wikimedia.org/wiki/Category:Videos?uselang=fr


    -pour enfants 


    -pédagogie (vidéo associée à la revue) 


    -bande annonce de films

    puis...



    1-A partir de Blogger


    Méthode conseillée, très simple, qui intègre la vidéo dans l'article !

    Pour commencer, cliquer sur sur l'icône noire et blanche en forme de clap de cinéma dans la barre d'outils de l'éditeur d'articles intitulée "Insérer une vidéo" : deux options s'offrent à vous dans la fenêtre pop-up qui s'affiche ( ici il s'agit d'intégrer une vidéo personnelle)



    • Importer à partir de l'ordinateur : vous pouvez 
      • "glisser/déposer" votre vidéo 
      • la "sélectionner" en parcourant votre ordinateur pour trouver la vidéo de votre choix.
        Blogger accepte les fichiers AVI, MPEG, QuickTime, Real et Windows Media à condition que leur taille soit inférieure à 100 Mo.


    La vidéo sélectionnée, aussitôt, est 
      • Importée
    Le temps d'attente varie en fonction de la taille de la vidéo ; il est généralement de cinq minutes environ.


      • traitée par Blogger
     
      •  insérée dans notre article.


    Exemple :

                                



    2- Transférer votre vidéo sur YOUTUBE

     Vous pouvez mettre en ligne des vidéos sur YouTube en seulement quelques étapes.

    Cette solution très simple vous évite plusieurs problèmes problèmes:
    -Le stockage des vidéos : les vidéos sont volumineuses, Google/Youtbe vous les stocke gratuitement !
    -L'encodage des vidéos : Youtube le fait à votre palce, et vous êtes certain que votre vidéo sera lisible !

    -L'insertion de la vidéo sera simplifiée : voir ci-dessus

    => C'est la méthode la plus simple que nous recommandons pour tous ! 

    Les règles de base:

    Par défaut, vous pouvez mettre en ligne des vidéos ne dépassant pas 15 minutes. Mais vous pouvez augmenter votre limite et 'importer des fichiers d'une taille supérieure à 20 Go. La taille des vidéos que vous pouvez mettre en ligne sur YouTube est limitée à 128 Go, et leur durée limitée à 11 heures.

    Seuls les formats suivants  sont acceptés:
    • .MOV
    • .MPEG4
    • .AVI
    • .WMV
    • .MPEGPS
    • .FLV
    • 3GPP
    • WebM
    Nous vous conseillons d'utiliser le format Mpeg 4 (Mp4) avec  encodage H264 donc avec l'extension  .mp4 , actuel quasi "standard vidéo" qui gère le mieux qulité et poids dela vidéo et qui s'affiche dans la plupart des navigateurs, OS et matériel ( PC, tablette, smartphone...)
    Si vous utilisez un format de fichier qui n'est pas mentionné ci-dessus, utiliser un logiciel pour convertir votre fichier.


    =>Voir l'aide Youtube pour importer des vidéos

    Pour mettre en ligne des vidéos sur YouTube depuis votre ordinateur, procédez comme suit :
    1. Connectez-vous à votre compte YouTube.
    2. Cliquez sur le bouton Mettre en ligne en haut de la page.
    3. Avant de démarrer l'importation de votre vidéo, vous pouvez configurer ses paramètres de confidentialité.
    4. Sélectionnez la vidéo que vous souhaitez importer à partir de votre ordinateur. Vous pouvez également enregistrer une vidéo avec votre webcam, créer un diaporama vidéo ou importer une vidéo de Google+.
    5. Pendant l'importation, vous pouvez modifier les informations standard et les paramètres avancés de votre vidéo, ainsi que décider si vous souhaitez avertir vos abonnés de sa mise en ligne (si vous décochez cette case, vos abonnés ne recevront aucune information). Les partenaires auront également la possibilité de définir leurs paramètres de monétisation.
    6. Cliquez sur Publier pour terminer l'importation de votre vidéo publique sur YouTube. Si vous avez défini les paramètres de confidentialité sur Privée ou Non répertoriée, cliquez simplement sur OK pour terminer l'importation, ou cliquez sur Partager pour partager votre vidéo en mode privé.
    7. Si vous ne cliquez pas sur Publier, les autres utilisateurs ne pourront pas voir votre vidéo. Vous pourrez toujours publier votre vidéo ultérieurement depuis votre Gestionnaire de vidéos.
    Une fois l'importation terminée, nous vous enverrons un e-mail pour vous informer que votre vidéo est prête à être mise en ligne. Vous pouvez ensuite transférer cet e-mail à vos proches pour partager facilement votre vidéo. Si vous préférez ne pas recevoir de notification, vous pouvez vous désinscrire via vos paramètres de messagerie.

    Pour mettre en ligne  à partir d'un téléphone, voir l'aide Google

    Désormais votre vidéo est sur Youtube, vous pouvez donc publier, diffuser votre vidéo sur votre blog, comme indiqué ci-dessus, partie 1, directement à partir de Blogger:
    -Placer votre curseur à l'endroit où vous souhaitez insérer la vidéo (si nécessaire, centrer....)
    -Indiquer votre recherche et validez : les vidéos disponibles s'affichent.


    -Sélectionnez la vidéo qui vous convient : elle s'affiche immédiatement

    -La vidéo s'affiche : C'est terminé ! mais, pour la lire, il faut publier ou mettre à jour l'article pour que le navigateur puisse la faire fonctionner



     

    3 Transférer votre vidéo sur Google Drive

    A savoir : C'est une possibilité intéressante mais l'intégration de la vidéo dans votre blog sera plus complexe  à réaliser..

    Vous pouvez transférer dans votre espace de stockage Google Drive, une de vos vidéos.

     Google Drive vous permet de manipuler tous types de fichiers à partir du même emplacement, y compris les fichiers vidéo.

     Avec Google Drive, vous pouvez :

    • Synchroniser ou importer des fichiers vidéo n'excédant pas 5 To (taille limitée par l'espace de stockage disponible)
    • Synchroniser ou importer des fichiers vidéo aux formats suivants :
      • Fichiers WebM (codec vidéo Vp8 et codec audio Vorbis)
      • Fichiers MPEG4, 3GPP et MOV (codecs vidéo h264 et mpeg4, et codec audio AAC)
      • Fichiers AVI (codec vidéo MJPEG et codec audio PCM)
      • Fichiers MPEGPS (codec vidéo MPEG2 et codec audio MP2)
      • Fichiers WMV
      • Fichiers .FLV (Adobe – codec vidéo FLV1, codec audio MP3)
      • Fichiers MTS
    • Consulter toutes vos vidéos en un clin d'œil. La résolution maximale pour la lecture est de 1920 x 1080.
    • Partager des vidéos sans avoir à échanger de pièces jointes
    • Ajouter des pistes de sous-titres à vos fichiers vidéo
    Aperçu et lecture d'une vidéo
    Pour retrouver les vidéos que vous avez importées, utilisez la flèche déroulante située dans le champ de recherche lors de vos recherches de vidéos dans Google Drive. Cliquez sur le nom d'un fichier pour l'ouvrir et lire la vidéo à l'aide du lecteur vidéo Google Drive.
    Vous pouvez également regarder un aperçu de la vidéo dans le volet d'aperçu.
    Lorsque vous ouvrez un fichier vidéo, vous pouvez voir des informations supplémentaires sur le fichier :
    • Propriétaire
    • Paramètres de partage
    • Date de la synchronisation ou de l'importation du fichier
    • Versions téléchargeables précédentes du fichier (non visible dans le lecteur vidéo)

    =>Voir cette vidéo stockée et partagée sur Google Drive

      

    Comment partager une vidéo ?

     puis partager cette vidéo pour obtenir un lien de partage

    •  Pour faire un lien, utiliser le code fourni

    =>Voir cette vidéo stockée sur Google Drive

    • Pour voir la vidéo intégrée, il faut utiliser ce code d'intégration en ayant auparavant extrait l'identifiant du fichier

    Méthode:

    => travailler avec le bloc note en copier/coller

    1-Extraire l'identifiant à partir du lien de partage fourni (ci-dessus)
       Copier le lien


    https://drive.google.com/file/d/0B6Uwn-CnZdmpnSmZhWEtDaGs/view?usp=sharing

    L’identifiant est la partie en fluo qu'il faudra copier/coller dans le code ci-dessous

    2-Copier/coller ce code en insérant le bon identifiant et, si nécessaire, modifier le taille de la vidéo
    <br />
    <iframe src="https://docs.google.com/file/d/IDENTIFIANT/preview" width="640" height="480"></iframe>
    <br />
    pour obtenir  :





     Conclusion:
     Passer par Google Drive  n'est pas la méthode  idéale ! 
    Il est toujours plus simple et  plus rapide d'opérer directement  à partir de Blogger et Youtube pour insérer une vidéo.



    4- Une vidéo stockée sur un serveur distant...

    Cela suppose :
    -que vous ayez ouvert un espace de stockage distant (ex : chez Free, voir notre article)
    - que vous connaissez l'adresse URL de votre vidéo, là où elle est stockée, exemple pour un stockage chez "free"

                                  http://monsite.free.fr/video/monfichier.mp4

    Attention certains services du cloud ne donnent pas l"URL exacte mais encodée, vous ne pourrez pas, en principe, afficher votre vidéo via ce code (testez !)



    1-Comprendre les formats vidéo

    =>Si vous ne connaisez pas les bases en format vidéo,  lire notre dossier complet


    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.


    A savoir: 
    =>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 codec H.264 est fortement recommandé en mp4

    2-La balise <video>
    ----------------------------------------------------------------
    <video src="ADRESSE URL" controls width="600">
    Votre navigateur n'est pas à jour !
    </video>
    ---------------------------------------------------------------
    A noter que la vidéo ne démarre pas automatiquement : vous avez un écran noir

    DEMONSTRATION (video .mp4)



     




    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 >
    <source src="URLdufichier.mp4">
    <source src="URLdufichierl.webm">
    <source src="URLdufichier.ogv">
    Votre navigateur n'est pas à jour
    </video>
    --------------------------------------------
    --------------------------------------------
    A SAVOIR :

    Le code HTML 4 concernant les vidéos est transformé par l'éditeur HTML de Blogger !

    ainsi ce code

    <video src="ADRESSE URL" controls>
    Votre navigateur n'est pas à jour !
    </video>


    devient :

    <video controls="" src="ADRESSE URL">
    Votre navigateur n'est pas à jour !

    </video>

    ce qui n'empêche pas la vidéo de fonctionner !
    ---------------------------------------


    =>VOIR UN ARTICLE AVEC UNE VIDEO encodée pour HTML 5 (3 formats)

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

     => Voir notre DOSSIER  complet sur l'intégration de MEDIAS médias




    5-Compléments

    Comment changer la taille de la vidéo?
    Il faut aller modifier le code de la vidéo ! donc retrouver le code dela vidéo  en affichant l'article en mode HTML

     
    Exemple d'un code d'intégration Youtube:

     <iframe width="560" height="315" src="https://www.youtube.com/embed/vxc5ZqSQ9C8" frameborder="0" allowfullscreen></iframe>

     il faudra modifier les valeurs de:
    - Width: Largeur en pixels
    - Height: Hauteur en pixels

    en conservant les proportions !

    Comment récupérer une vidéo du net ?
     un site complet qui explique clairement toutes les possibilités


    en ligne avec  :
    FLUVORE : Fluvore est un nouvel outil qui vous permettra de télécharger les vidéos de Dailymotion, de YouTube ainsi que de nombreux autres sites de vidéos .
    Le principe :  Après avoir vu  un vidéoclip sur Youtube , vous souhaitez récupérer fichier vidéo

    1- Aller sur Youtube http://www.youtube.com/
    2 - Chercher  une vidéo...
    3-  Copier son adresse URL (dans le navigateur)
    4- Aller sur le site Fluvore
    5- Coller l'adresse URL de la vidéo de Youtube
    et Sélectionnez le format de conversion que vous souhaitez
    6- Cliquer sur "convertir  et télécharger"


    7- le fichier  obtenu  se situe dans votre dossier Téléchargement)


    AUTRE SITE

    http://keepvid.com/
    Pour récupérer directement :
    -coller l'URL dans la barre d'adresse en haut de la page, cliquer sur "Download" à droite.
    -Au-dessous s'affichent plusieurs téléchargements possibles, selon la définition de la vidéo et donc la taille du fichier. Choisir la meilleure définition et donc la taille la plus importante, sauf si votre choix est différent...
    -Ensuite, avec un clic droit, ouvrir le lien dans une nouvelle fenêtre (cela ne marche pas dans un nouvel onglet), mais on peut aussi copier l'adresse du lien et la coller dans la barre d'adresse d'un nouvel onglet ou d'une nouvelle fenêtre.
    -La vidéo s' ouvre dans la nouvelle fenêtre, et un clic droit permet de l'enregistrer à l'endroit de votre choix. 

    Voir aussi

    Quel format/codec vidéo utiliser pour afficher une vidéo sur le net (blog, site web) ?

    Nous recommandons le MP4/h.264, AAC actuellement le meilleur couple format/codec vidéo, codec audio. Avec ce format il vous sera possible d’uploader vos vidéos sur la plupart des plateformes.

    =>Voir notre dossier sur ce blog 

    Voir ces sites :