Commentaire sur la fiche : Comment intégrer une vidéo dans un champ un texte ?

Si la réponse à cette question ne vous parait pas claire ou si elle vous semble obsolète, n’hésitez pas à nous en faire part.

Et nous sommes preneurs également de toute correction de faute d’orthographe ou de grammaire...

Rappel du texte de la fiche :

Il est possible d’intégrer une vidéo dans un ehamp texte à condition de récupérer le code d’intégration de votre vidéo ou de l’écrire vous-même.

Quelque soit la méthode utilisée, le code d’intégration doit être précédé et suivi d’une ligne contenant uniquement les caractères ???, ces deux lignes délimitant une zone spéciale où le code HTML sera directement interprété.

1 - Vidéo hébergée sur un site web d’hébergement de vidéo

Exemple sur Youtube

Sur la vidéo, cliquez avec le bouton droit de la souris sur la vidéo et choisissez dans le menu « copier le code d’intégration » :

Puis collez le code obtenu dans le champs texte (toujours encadré par deux lignes avec ???) :

???

<iframe width="540" height="400" src="https://www.youtube.com/embed/9YkBmRw1ZQA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

???

Ce qui donne à l’affichage :

Exemple sur Dailymotion

Cliquez sur le petit avion de papier « partager la vidéoexporter » prendre l’option «  Intréger le code » et copier le code affiché :

Puis collez le code obtenu dans le champs texte (toujours encadré par deux lignes avec ???) :

???

<iframe frameborder="0" width="640" height="360" src="https://www.dailymotion.com/embed/video/xg9kly" allowfullscreen allow="autoplay"></iframe>

???????????

Ce qui donne à l’affichage :

2 - Si vous hébergez vous-même votre vidéo

Il faut préparer vous-même les fichiers, les déposer dans votre espace d’hébergement et écrire une balise HTML5 <video> dans une zone de code HTML brut.

Le format des fichiers vidéo est important. Les plus répandus pour une lecture selon les navigateurs sont WebM et MP4.

! Si le format de votre vidéo est différent et ne peut être lu, il convient au préalable d’utiliser un logiciel spécifique permettant sa conversation vers un format adapté (par exemple, ffmpeg en ligne de commande sous GNU-Linux).

Voici l’exemple de l’intégration d’une telle vidéo. Trois fichiers ont été produits :

devoir-vigilance.jpg : l’image « poster », c’est à dire l’image affichée avant le chargement de la vidéo par l’internaute
devoir-vigilance.mp4 : la vidéo au format MP4
devoir-vigilance.webm : la vidéo au format WebM

???
<video controls="controls" poster="https://docs.eclm.fr/video/devoir-vigilance/devoir-vigilance.jpg">
        <source src="https://docs.eclm.fr/video/devoir-vigilance/devoir-vigilance.mp4" type="video/mp4" />
        <source src="https://docs.eclm.fr/video/devoir-vigilance/devoir-vigilance.webm" type="video/webm" />
</video>
???????????

Ce qui donne à l’affichage :