Téléverser et intégrer des vidéos dans un article WordPress

Cet article aborde le téléversement, c’est-à-dire l’envoi d’une vidéo sur un serveur hébergeant WordPress et son intégration dans un article WordPress.

Pour intégrer des vidéos déjà en ligne sur un site de vidéos, comme Youtube, consulter l’article : http://tice974.ac-reunion.fr/integrer-videos-deja-en-ligne

Il peut être intéressant de comparer l’affichage de cet article avec différents terminaux (PC, tablettes, téléphones) pour comparer le rendu.

Préparer sa vidéo

Avant le téléchargement, l’auteur (et le webmestre !) s’assureront du respect de quelques règles.

Droit d’auteur

L’auteur ne mettra en ligne que des vidéos de création personnelle ou libres de droit ! (et qui ne seraient pas déjà en ligne sur internet ?)

Droit à l’image

L’auteur doit avoir l’autorisation (écrite) des personnes identifiables, ou de leurs représentants pour les mineurs.

Formats et taille de fichiers acceptés

L’auteur doit vérifier auprès du webmestre quels formats et taille de fichiers sont autorisés sur le serveur WordPress. Pour information, le webmestre / administrateur peut consulter http://tice974.ac-reunion.fr/wiki-administrateurs/doku.php?id=applications:wordpress:fichiers-telecharges.

Concernant la taille, il est souvent préférable (encombrement, débit) de couper une vidéo en plusieurs fichiers indépendants.

Les formats à privilégier sont :

  • « WebM », mais peu de logiciels peuvent encore encoder dans ce format ;
  • « OGM », déjà un peu plus répandu ;
  • « MP4 » avec codage « H264 ».

Des outils à recommander :

Téléverser sa vidéo dans WordPress et l’insérer simplement (solution imparfaite)

Dans un article en rédaction,

  1. cliquer sur « Ajouter un média »,
  2. puis « Envoyer des fichiers ».
  3. Procéder par glisser-déposer ou « Sélectionner des fichiers »,
  4. terminer par « Insérer dans l’article », ce qui produit le « shortcode » (lien court interprété par WordPress) (les crochets ont été remplacés par des parenthèses) :
    (video width="320" height="240" mp4="http://tice974.ac-reunion.fr/wordpress/wp-content/uploads/Maternelle_extrait.mp4")(/video)

L’inconvénient est qu’actuellement (WordPress 3.6 des serveurs Scribe / ENT ou WordPress 3.8 du serveur WPEtab), ce code produit un affichage qui ne fonctionne qu’avec l’extension « Adobe flash » des navigateurs. Or les tablettes et téléphones n’intègrent plus cette extension qui semble donc condamnée à disparaitre.

Résultat, la vidéo ci-dessous ne sera généralement pas visible sur une tablette ou un téléphone :

Video: please specify correct url

Téléverser sa vidéo dans WordPress et l’insérer par un code adéquat (solution améliorée)

Dans un article en rédaction,

  1. cliquer sur « Ajouter un média »,
  2. puis « Envoyer des fichiers ».
  3. Procéder par glisser-déposer ou « Sélectionner des fichiers »,
  4. terminer par « Insérer dans l’article », ce qui produit le « shortcode » (lien court interprété par WordPress) (les crochets ont été remplacés par des parenthèses) :
    (video width="320" height="240" mp4="http://tice974.ac-reunion.fr/wordpress/wp-content/uploads/Maternelle_extrait.mp4")(/video)
  5. Passer du mode « Visuel » au mode « Texte » puis coller le code « HTML » suivant :
    <iframe width="LARGEUR" height="HAUTEUR" src="ADRESSE" frameborder="0" allowfullscreen></iframe>
  6. Du « shortcode » précédent, copier-coller l’ADRESSE,
  7. renseigner la LARGEUR et la HAUTEUR d’affichage voulues,
  8. revenir en mode « Visuel »,
  9. et enregistrer l’article.

Résultat :

Remarque :

Il ne semble pas possible d’empêcher la lecture automatique, ce qui est gênant, surtout si l’article doit contenir plusieurs vidéos !

Téléverser sa vidéo dans WordPress et l’insérer avec une extension adéquate (solution conseillée)

L’intégration par code « HTML » est universelle mais plutôt complexe. Beaucoup d’extensions proposent d’intégrer des vidéos en lignes dans un article WordPress plus simplement, malheureusement presque toutes produisent un affichage nécessitant une extension de navigateur « Adobe flash ».

Or les téléphones et tablettes n’intègrent presque plus cette technique qui semble vouée à disparaitre. Conséquence : les sons et vidéos affichés par une extension WordPress fonctionnant avec « Adobe flash » ne s’afficheront pas sur ces supports !

Il est donc conseillé d’utiliser une extension utilisant la technologie HTML5 compatible avec tous les navigateurs “récents” de tous les supports, comme « VideoJS – HTML5 Video Player for WordPress » est conseillée. Seul un super-administrateur pourra en faire l’installation.

Exemple sur ce site où l’extension est installée et activée :

Dans un article en rédaction,

  1. cliquer sur « Ajouter un média »,
  2. puis « Envoyer des fichiers ».
  3. Procéder par glisser-déposer ou « Sélectionner des fichiers »,
  4. terminer par « Insérer dans l’article », ce qui produit le « shortcode » (lien court interprété par WordPress) (les crochets ont été remplacés par des parenthèses) :
    (video width="320" height="240" mp4="http://tice974.ac-reunion.fr/wordpress/wp-content/uploads/Maternelle_extrait.mp4")(/video)
  5. Du « shortcode » précédent, copier-coller l’ADRESSE,
  6. cliquer sur l’icône « Insert HTML5 Video »,
  7. dans « MP4 » (si la vidéo est dans ce format) coller l’ADRESSE,
  8. dans « Width », donner la largeur,
  9. dans « Height », donner la hauteur,
  10. tout en bas de cette fenêtre, cliquer sur « Insert Video » qui produit un « shortcode » (code court qui sera interprété par l’extension), ici (les crochets ont été remplacés par des parenthèses) :
    (videojs mp4="http://tice974.ac-reunion.fr/wordpress/wp-content/uploads/Maternelle_extrait.mp4" width="420" height="315" preload="true")

Résultat :

 

Remarques :

  • L’extension ne fonctionne qu’avec certains formats de fichiers vidéos : « MP4 », « WebM », « OGG »…
  • Avant lecture, cette extension affiche le lecteur vidéo vide.
    Pour ajouter une image visible avant de lancer la lecture, il faut faire une capture sur la vidéo, la téléverser puis l’ajouter dans le « shortcode »… Fastidieux ! (mais tous les lecteurs au format HTML5 semblent avoir ce défaut…)

CC BY-NC-SA 4.0 Cette œuvre est sous Licence Creative Commons Internationale Attribution-Pas d'utilisation Commerciale-Partage à l'identique 4.0 .

Les commentaires sont fermés.