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
-lire notre article "Navigateur et affichage vidéo : Problèmes et solutions"
|
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...
Méthode conseillée, très simple, qui intègre la vidéo dans l'article !
-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
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)
La vidéo sélectionnée, aussitôt, est
- 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
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 :
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 :
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 :
=>Voir cette vidéo stockée et partagée sur Google Drive
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
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.
-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 !)
ATTENTION
Désormais il est impossible d'intégrer des vidéos, PDF, musique ... hébergés sur un serveur personnel distant ( Ex Free) avec les balises HTML traditionnelles. Cela ne fonctionne plus.
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 !)
ATTENTION
Désormais il est impossible d'intégrer des vidéos, PDF, musique ... hébergés sur un serveur personnel distant ( Ex Free) avec les balises HTML traditionnelles. Cela ne fonctionne plus.
Seule solution, stocker sur Google Drive ou faire un simple lien, comme ci-dessous :
Voir la vidéo hébergée chez Free :
=> Cliquer sur VOIR LA VIDEO
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:
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
=>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.
----------------------------------------------------------------
<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.
- 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
- http://www.clipconverter.cc/
- http://www.jdownloader.org/fr/home/features
- http://www.clipconverter.cc/
- http://www.video2mp3.net/fr/
- http://file2hd.com/
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 :
