Question : Comment intégrer une vidéo dans un champ un texte ?

Niveau : Utilisation courante

Commandes concernées : CRP-19

Réponse :

Dans le champ « texte » de votre fiche, il est possible d’intégrer une vidéo.

Tout d’abord, il faut trouver une solution pour héberger la vidéo (serveur, ou youtube, ou dailymotion…). Ensuite de copier coller le lien dans zone texte.

Pour indiquer dans le champ texte qu’il s’agit d’une vidéo, la première ligne comportera trois « ??? » et la dernière au minimum trois « ??? » également.

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

Exemple de vidéo enregistrée sous Youtube :

  • sur la vidéo, cliquez avec le bouton droit de la souris sur « obtenir le code d’intégration » et copier coller le lien dans le champs texte, encadré par les "??? »

  • puis cliquez sur Valider

???

<iframe width="454" height="280" src="https://www.youtube.com/embed/q4GTF-x6Cb0" frameborder="0" allowfullscreen></iframe>

???

Ce qui donne en mode affichage :


Exemple à partir de Daylymotion :

  • sous la vidéo dans « exporter » et copier coller le lien dans le champ texte, encadré par les "??? »

  • puis cliquez sur Valider

???

<iframe frameborder="0" width="480" height="270" src="//www.dailymotion.com/embed/video/x29zl9a" allowfullscreen></iframe><br /><a href="http://www.dailymotion.com/video/x29zl9a_un-robot-largue-sur-une-comete-a-un-demi-milliard-de-km-de-la-terre_news" target="_blank">Un robot largu&eacute; sur une com&egrave;te &agrave; un demi…</a> <i>par <a href="http://www.dailymotion.com/6MEDIAS" target="_blank">6MEDIAS</a></i>

???????????

Ce qui donne en mode affichage :

2 - Si votre vidéo n’est pas enregistrée sur un site web d’hébergement de vidéo, plusieurs étapes sont à suivre :

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é.


  • 1 - préparation des fichiers et notamment du format vidéo tels que mp4 ; webm; ogg (utilisation d’un logiciel spécifique pour convertir le format de vidéo vers un format communément accepté et lu par les navigateurs)

  • 2 - introduction de la balise vidéo = <video class>

  • 3 - le format = controls="controls" width="400px" height="280px" (bouton avant, arrière + format de l’image)

  • 4 - intégration de l’image de l’écran, par exemple = poster="http://docs.afrique-gouvernance.net/conf2012/couv_governacao_debate.jpg">

  • 5 - intégration des différents formats disponibles avec la balise <source src = … > comme l’exemple ci-dessous :

<source src="http://docs.afrique-gouvernance.net/conf2012/Governacao_em_Africa_em_debate_na_cidade_da_Praia.mp4" type="video/mp4"></source>
<source src="http://docs.afrique-gouvernance.net/conf2012/Governacao_em_Africa_em_debate_na_cidade_da_Praia.webm" type="video/webm"></source>
<source src="http://docs.afrique-gouvernance.net/conf2012/Governacao_em_Africa_em_debate_na_cidade_da_Praia.ogv" type="video/ogg"></source>

Une fois toutes ces étapes respectées, saisissez dans le champ texte :

???

<video class="video-js" controls="controls" width="400px" height="280px" poster="http://docs.afrique-gouvernance.net/conf2012/couv_governacao_debate.jpg">

<source src="http://docs.afrique-gouvernance.net/conf2012/Governacao_em_Africa_em_debate_na_cidade_da_Praia.mp4" type="video/mp4"></source>

<source src="http://docs.afrique-gouvernance.net/conf2012/Governacao_em_Africa_em_debate_na_cidade_da_Praia.webm" type="video/webm"></source>

<source src="http://docs.afrique-gouvernance.net/conf2012/Governacao_em_Africa_em_debate_na_cidade_da_Praia.ogv" type="video/ogg"></source>

<p class="vjs-no-video">

<strong><a href="http://docs.afrique-gouvernance.net/conf2012/Governacao_em_Africa_em_debate_na_cidade_da_Praia.ogv">.ogv</a>, <a href="http://docs.afrique-gouvernance.net/conf2012/Governacao_em_Africa_em_debate_na_cidade_da_Praia.webm">.webm</a>, <a href="http://docs.afrique-gouvernance.net/conf2012/Governacao_em_Africa_em_debate_na_cidade_da_Praia.mp4">.mp4</a></strong>

</p>

</video>

???????????

Ce qui donne en mode affichage :

Questions voisines