Insérer des vidéos

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. -Dans tous les cas, tester votre réalisation avec divers navigateurs. -Si un navigateur pose problème : le désinstaller complètement : cad  par le programme de désinstallation, mais aussi ensuite supprimer absolument tous les dossiers/fichiers restants  (dans C:\Program Files (x86)\ ou C:\Program Files\) et dans %APPDATA% ). Pour firefox, suivre ce guide. N'oubliez pas de sauvegarder vos signets/favoris pour les ré-installer ensuite Ensuite ré-installer le navigateur: miracle, vos vidéos s'affichent !

Comment insérer  des vidéos 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 une insertion de vidéo :

• d'abord des vidéos provenant du net (Youtube et Daymotion)
• ensuite vos vidéos personnelles

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.

1-VIDEOS DU NET

1-1 avec YOUTUBE, directement avec Blogger

Pour commencer, procédez comme suit.

1. Cliquez sur l'icône noire et blanche en forme de clap de cinéma dans la barre d'outils de l'éditeur d'articles.

1. Quatre options s'offrent à vous dans la fenêtre pop-up qui s'affiche :
   • Importer : vous pouvez parcourir votre ordinateur pour trouver la vidéo de votre choix. Si c'est la première fois que vous transférez une vidéo, vous devrez accepter les conditions d'utilisation.
   • À partir de YouTube : vous pouvez choisir une vidéo de YouTube et l'afficher sur votre blog.
   • Mes vidéos YouTube :Si vous possédez des vidéos sur un compte Google, vous pouvez y accéder dans cet onglet et les transférer.
   • Depuis votre mobile (téléphone): Si vous avez un compte Google+ et un téléphone sous Android, vous pouvez télécharger une application vous permettant de transférer instantanément les vidéos de votre téléphone vers votre compte Google. Vous pouvez ensuite cliquer sur l'onglet "À partir de votre téléphone" et publier une vidéo de votre téléphone sur votre blog. Tout le contenu ainsi transféré à partir de votre téléphone restera privé tant que vous n'aurez pas décidé de le partager.
   • Depuis votre Webcam
2.  Nous choisissons l'option la plus simple : À partir de YouTube
   
   Indiquer votre recherche :
   
   
   les vidéos disponibles s'affichent:
   
   
   sélectionner celle qui vous convient puis valider


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

1-2 avec YOUTUBE, à partir du site

-aller sur Youtube   et  sélectionner la vidéo. La visualiser.
-faire un clic doit sur la vidéo pour obtenir ce menu:

ou se rendre en dessous de la vidéo sur

 ce qui revient au même, ainsi vous pouvez obtenir:

"Copy video URL"  = "Partager": l'adresse de la vidéo pour faire un lien d'accès rapide, ainsi:
Voir cette vidéo 
ou
"Copy embed code" =" Intégrer" : obtenir le code pour intégrer la vidéo dans votre article (en mode HTML!).
=>A noter qu'en cliquant sur l'icône Blogger, un article est automatiquement créé dans votre Blog !
Manuellement, vous devez coller ce code et la vidéo apparait :

 

1-3 avec DAILY MOTION, à partir du site

-aller sur   Dailymotion et  sélectionner la vidéo.

-En dessous de la vidéo, vous avez "EXPORTER" ou  le symbole < >
 cliquer :

-Remarquer que vous configurer l'affichage de la vidéo, en particulier sa taille

-vous pouvez seulement faire un simple lien grâce au permalien qu'il faut copier/coller pour aller lire la vidéo

-vous pouvez aussi intégrer sur votre blog la vidéo : 
Copier le code d'intégration qu'il faudra coller dans votre article en mode HTML

pour obtenir :

Débarquement: le récit de la bataille d'Omaha... par BFMTV

2-VOS VIDEOS PERSONNELLES

Vous n'avez pas de vidéo perso pour tester ?  télécharger légalement une vidéo sur
-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...

2-1 A partir de Blogger

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

Pour insérer une vidéo dans votre article, cliquez sur l'icône représentant une pellicule dans la barre d'outils de l'éditeur, au-dessus de la zone de rédaction. Une fenêtre vous invite à ajouter une vidéo à votre article.
Cliquez sur Parcourir pour sélectionner le fichier vidéo à transférer à partir de votre ordinateur. 
Blogger accepte les fichiers AVI, MPEG, QuickTime, Real et Windows Media à condition que leur taille soit inférieure à 100 Mo.

Pour commencer, procédez comme suit.

1. Cliquez sur l'icône noire et blanche en forme de clap de cinéma dans la barre d'outils de l'éditeur d'articles.

1. Quatre options s'offrent à vous dans la fenêtre pop-up qui s'affiche :
   • Importer : vous pouvez parcourir votre ordinateur pour trouver la vidéo de votre choix. Si c'est la première fois que vous transférez une vidéo, vous devrez accepter les conditions d'utilisation.
   • À partir de YouTube : vous pouvez choisir une vidéo de YouTube et l'afficher sur votre blog.
   • Mes vidéos YouTube :Si vous possédez des vidéos sur un compte Google, vous pouvez y accéder dans cet onglet et les transférer.
   • Depuis votre mobile (téléphone): Si vous avez un compte Google+ et un téléphone sous Android, vous pouvez télécharger une application vous permettant de transférer instantanément les vidéos de votre téléphone vers votre compte Google. Vous pouvez ensuite cliquer sur l'onglet "À partir de votre téléphone" et publier une vidéo de votre téléphone sur votre blog. Tout le contenu ainsi transféré à partir de votre téléphone restera privé tant que vous n'aurez pas décidé de le partager.
   • Depuis votre Webcam
2.  Nous choisissons donc l'option qui convient "Importer"

Ensuite nous sélectionnons notre vidéo qui, aussitôt, est "téléchargée : en transfert" puis "traitée". Le temps d'attente varie en fonction de la taille de la vidéo ; il est généralement de cinq minutes environ.  
Enfin elle est  insérée dans notre article.
Rien de plus simple.

                            

2-2 Transférer votre vidéo sur YOUTUBE

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

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 :

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:

"Mes vidéos Youtube"

2-3 Transférer votre vidéo sur Google Drive

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:
 Il est toujours plus simple et  plus rapide d'opérer directement  à partir de Blogger pour insérer une vidéo.

2-4 Une vidéo stockée sur un serveur/cloud...

Cela suppose 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/fichier.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
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 format 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 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...)        => Voir notre DOSSIER  complet sur l'intégration de MEDIAS médias




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 n’importe quelle plateforme.
Voir ces sites :

• quel-meilleur-format-video-web
• La compression pour le web
• HTML5 et vidéo
• Compression de vidéo