Utilisation des valves, génération du site web de l'ULB - format xml
sommairesommaireindexindexdébutdébutpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

Lecteur vidéo

Si des données de type vidéo sont associées aux informations, il est possible de faire apparaître un lecteur vidéo qui permettra aux internautes de les visionner.

Contrairement à la vignette et à l'illustration, ces données vidéo ne sont pas gérées en tant que telles (il est plus rare de rencontrer une vidéo que des images). Toutefois, elles peuvent être associées soit sous forme d'un fichier attaché, soit via un lien associé à l'information.

Il est également possible, ce qui est vivement conseillé, de placer la vidéo sur la plate-forme YouTube et de la visionner à partir de votre page web (YouTube possède en effet des serveurs ultra-performants répartis un peu partout sur le globe et totalement dédiés à la diffusion de vidéos. Ces moyens techniques sont hors de portée de l'université).

Pour exploiter ces données vidéo, il est nécessaire d'utiliser un élément <vidéo> dans l'élément <affichage> qui fera apparaître le lecteur vidéo à l'endroit précisé.


Comment associer une donnée vidéo

La première possibilité est de placer la donnée vidéo dans un fichier attaché lié à l'information. Seuls les fichiers mp4 et ogg sont supportés pour l'instant. Si la balise <vidéo/> est présente, ce fichier attaché sera soustrait de la liste des fichiers attachés et proposé à l'écoute via le lecteur vidéo.

La deuxième possibilité (si aucun fichier attaché audio n'est trouvé), c'est d'utiliser le lien de l'information. Si celui-ci contient une URL qui pointe vers un document de type mp4 ou ogg et que la balise <vidéo/> est présente, alors le lecteur vidéo sera utilisé pour écouter ce document. Attention, dans ce cas, le document vidéo ne sera pas mis en cache et sera utilisé via l'URL en question (assurez-vous que ce document ne disparaisse pas).

La troisième possibilité, la plus adéquate, est d'utiliser un lien égal à youtube:xxxxxxxx est l'identificateur d'une vidéo que vous avez placé sur le site de YoutTube.

Consultez les documents ci-contre pour savoir comment les fichiers attachés et les liens sont gérés dans les différentes sources.

Pour plus d'information sur les données disponibles:


Taille du lecteur vidéo

Par défaut, le lecteur audio prendra 240 pixels de large (la hauteur sera adaptée pour conserver la proportion largeur/hauteur de la vidéo). Vous pouvez changer cela grâce à un attribut largeur donnant la taille à utiliser (en nombre de pixels). Vous pouvez également changer la hauteur grâce à un attribut hauteur (prenez garde de ne pas trop déformer votre vidéo; si vous ne précisez pas la hauteur, elle s'adaptera à la largeur choisie afin de conserver les proportions de la vidéo).


Cet exemple utilise <vidéo/> sans attribut largeur. La taille par défaut (240 pixels) sera utilisée.

Exemple
<valves style="colorBar4" debug="oui">
   <affichage>
      <titre/>
      <vidéo/>
      <contenu/>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="lune"/>
</valves>
loading...ajax1

Cet exemple utilise une largeur de 200 pixels.

Exemple
<valves style="colorBar4" debug="oui">
   <affichage>
      <titre/>
      <vidéo largeur="200"/>
      <contenu/>
      <contenu/>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="lune"/>
</valves>
loading...ajax2

Position du lecteur vidéo

Par défaut, la vidéo s'affichera à droite et le texte qui suit viendra se positionner à gauche de celle-ci. Vous pouvez changer cela grâce à un attribut position comme pour une image.


Cet exemple aligne le lecteur à gauche.

<vidéo largeur="240" position="gauche"/>
loading...ajax3

Cet exemple aligne le lecteur au centre.

<vidéo largeur="240" position="centre"/>
loading...ajax4

Cet exemple aligne le lecteur à droite.

<vidéo largeur="240" position="droite"/>
loading...ajax5

Cet exemple aligne le lecteur à gauche et positionne le texte tout autour.

<vidéo largeur="240" position="gauche-texte"/>
loading...ajax6

Cet exemple aligne le lecteur à droite et positionne le texte tout autour.

<vidéo largeur="240" position="droite-texte"/>
loading...ajax7

Espacement autour du lecteur vidéo

Comme pour la vignette et l'illustration, il est possible de régler l'espacement entre le lecteur vidéo et le reste du texte, grâce aux attributs espace-haut, espace-bas, espace-gauche et espace-droite.

Le même exemple que ci-dessus, mais avec un espacement de 20 pixels à gauche et en bas.

<vidéo largeur="240" position="droite-texte" espace-bas="20" espace-gauche="20"/>
loading...ajax8

Lecteur vidéo et vignette/illustration

Si une information contient à la fois une image (vignette, illustration oui vignette-source) et un lecteur vidéo, cela peut compromettre la mise en page. Il est possible dans ce cas de supprimer l'image.


Dans cet exemple, la vignette et le lecteur vidéo sont positionnés tous les deux à droite du texte.

<valves style="colorBar4" debug="oui">
   <affichage>
      <titre/>
      <vignette position="droite-texte"/>
      <vidéo largeur="240" position="droite-texte"/>
      <contenu/>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="lune"/>
</valves>
loading...ajax9

Supprimer l'image en cas de présence du lecteur vidéo

Vous pouvez dans ce cas décider de supprimer l'image en ajoutant un attribut image="non" sur l'élément <vidéo/>. Dans ce cas, si un lecteur vidéo est présent, l'image sera supprimée.

<valves style="colorBar4" debug="oui">
   <affichage>
      <titre/>
      <vignette position="droite-texte"/>
      <vidéo largeur="240" position="droite-texte" image="non"/>
      <contenu/>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="lune"/>
</valves>
loading...ajax10
ULB - entreprise écodynamique