Media : Ajouter ma video/image/son/document sur mon site

Contributeurs

Statut du tutoriel : 

À jour

Catégorie du tutoriel : 

Niveau du tutoriel : 

Modules utilisés : 

Dans ce tutoriel on apprendra :

  • Comment uploader un fichier video/image/pdf... sur le site (le site héberge le fichier)
  • Comment afficher une video avec un lecteur video
  • Comment ajouter des fichiers distants sur le site (le site utilise un fichier à distance)

La liste des formats supportés se trouve en bas de document.

Attention à la gestion des droits

Ce tutoriel va vous permettre de manipuler des fichiers, et les modules utilisés vont ajouter plein de droits à paramètrer dans la page d'administration des droits : admin > people > permissions

Nousvous invitons à parcourir (ou reparcourir) le tutoriel : http://assos.centrale-marseille.fr/content/tutoriel/fichiers-et-contenus-priv%C3%A9spublics-tout-ce-quil-faut-savoir

Par exemple, si vous ne faites rien, les fichiers seront vraisemblablement accessibles via l'url file/identifiant_du_fichier comme pour node/identifiant_du_noeud.

Comment uploader un fichier video/image/pdf... sur le site (le site héberge le fichier)

Pour celà, il faut suivre les étapes suivantes :

  1. Activez le module média et ses dépendances.
  2. Vous pouvez alors ajouter des fichiers gérés par média par plusieurs manières différentes :
    • Le fichier est ajouté via un champ fichier
    • Le fichier est ajouté via un éditeur de texte
    • Le fichier est ajouté via la page de gestion des fichiers /admin/content/file

Via un champ fichier

  • Éditez le type de contenu souhaité (page de base par exemple via Menu d’administration > structure > types > manage > page > fields)
  • Ajoutez un champ de type Fichier et de widget Media file selector
  • Allez jusqu'au bout de la configuration de ce champ (choisir les extensions autorisées...) et entregistrez
  • Allez dans l’onglet Affichage
    • Sélectionnez comme format pour ce champ video, si vous voulez utiliser ce champ pour afficher une vidéo.
    • Enregistrez
  • Vous pouvez désormais créer un contenu page, le champ que vous venez de créer propose un boutton qui permet d'ajouter des média qui seront affiché correctement

Via l'éditeur de texte (ne fonctionne pas encore parfaitement pour les vidéos)

L’avantage de cette technique par rapport à celle décrite ici est que vous pourrez choisir pour chaque image/vidéo si elle est privée ou publique.

  • Configurez le format de texte voulu (exemple : Full html via Menu d’administration : config > content > formats > full_html) en sélectionnant Convert Media tags to markup dans la liste de Filtres activés.
  • Configurez le profil CKEditor utilisé (exemple : le profil full via Menu d’administration : config > content > ckeditor > edit > Full)
    • Dans Editor apparence, selectionner Plugin for inserting images from Drupal media module dans la section plugins, ainsi que d'autres plugins si besoin.
    • Faites glisser l'icone pour le mettre dans la section Used buttons
    • Enregistrez
    • Vous pouvez désormais créer un contenu page et directement ajouter un nouveau média via l'éditeur de texte ou encore utiliser un média existant

C'est fini pour la création de média, voyons voir maintenant comment faire pour lire une vidéo directement via le le site

Via la page d'administrations des fichiers

On retrouve la même chose que lors de l'ajout à partir d'un champ fichier, si l'on clique sur Add file (accessible via Menu d’administration : Contenu > Fichiers)

Astuce

Dans le selecteur de média vous pouvez tout le temps accéder aux médias déjà créés par le passé, une simple selection permet leur réutilisation ;)

Comment ajouter des fichiers distants

Pourquoi ne pas ajouter les fichiers directement sur le site comme avec la méthode précédente ? Parce que par exemple les fichiers vidéos sont en générals volumineux et que notre espace disque est limité (ici c'est pas Mega ou un espace de stockage en cloud).

  1. Activez le module Remote Stram Wrapper
  2. Si vous utiliser un upload via un champ fichier :
    • Dans le paramètrage du champ, "Allowed URI schemes", cochez les méthodes que vous aller utiliser
  3. Dans la fenêtre (ou la popin selon laméthode utilisée), il y a un nouvel onglet "Remote URL"
  4. Metter l'URL du fichier que vous souhaitez ajouter

NB : pour le visionnage de la vidéo, javascript peut s’avérer nécessaire.

Remarque : Configurer Media

Auparavent, média nécessitait d'être configuré, ce qui demandait de bien comprendre la notion d'entité de Drupal. Depuis sa version 7.2, Media possède une configuration qui permet de lire des vidéos, des fichiers sons, etc. sans avoir à le paramètrer. Par contre, si vous avez des besoins spécifiques, il faudra le configurer, ce qui ne sera pas chose facile.

Vous pouvez vous rapprocher du club drupal au besoin.

Vidéos Youtube

Voir le tutoriel suivant pour l’intégration avec Youtube : http://assos.centrale-marseille.fr/content/tutoriel/media-ajouter-une-vi...

Formats supportés par Media

Vidéos Sons Images Documents

webm

mp4

ogv

ogg

wav

png

jpeg

à peu près tout

Formats non supportés par Media

Vidéos Sons Images Documents
flv mpg    

Si vous essayez d'autres formats, n'hésitez pas à nous les signaler afin de remplir les tableaux précédents.