probleme alignement videos

probleme alignement videos

par chris heurtin,
Nombre de réponses : 4

Bonjour,

Je suis enseignant, la version de moodle chez nous est la 3.10.

Dans mes cours j'utilise des videos hébergées par Youtube.

J'ai créé une étiquette dans mon cours, puis fait un lien vers youtube via l'outil insertion media, moodle insère une balise <video> dans le code html, et la video apparaît dans mon cours, ce qui me convient très bien.

Par contre quand j'ai plusieurs vidéos à la suite elles s'affichent dans mon les unes sous les autres, alors que je voudrais les avoir côte à côte.

J'ai modifié la taille par défaut des vidéos pour que plusieurs puissent s'afficher sur une même ligne.

La seule solution que j'ai trouvée n'est pas pratique, elle consiste à utiliser les balises <iframe> au lieu des <video>, ce qui me demande plus de travail dans la préparation de mon cours.

Ci-dessous le code html de mon étiquette :

2 videos : 
<video  controls="true" width="200" height="133">
<source src="https://youtu.be/OQHf-hX9JhM">https://youtu.be/OQHf-hX9JhM</video>
<video controls="true" width="200" height="133">
<source src="https://youtu.be/M8DIZyBMBRI">https://youtu.be/M8DIZyBMBRI</video>

Je suis sur que la solution n'est pas très compliquée mais mes connaissances Moodle et html sont limitées. Merci,

Christophe


Moyenne des évaluations  -
En réponse à chris heurtin

Re: probleme alignement videos

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles
Bonjour,
  • Avez-vous essayé de placer un tableau d'une seule ligne et de plusieurs colonnes avec les vidéos intégrées dans chacune des cases ?
  • Sinon on peut placer des vidéos adaptées à la taille de blocs, et selon le thème graphique utilisé, on peut parfois placer des blocs alignés en partie centrale.
  • Une autre solution est d'utiliser des étiquettes bootstrap consistant en un bouton à cliquer avec un texte et une icône présentant la vidéo dans une fenêtre surgissante avec la vidéo en pleine fenêtre. Evite de trop surcharger les pages avec des vidéos.
J'utilise beaucoup cette dernière formule. Exemple:
bouton
Il y a de très nombreuses façons d'afficher des vidéos ailleurs qu'en pleine page.
 
Daniel
Moyenne des évaluations Utile (1)
En réponse à Daniel Méthot

Re: probleme alignement videos

par Christian Bocquet,
Avatar Moodleurs particulièrement utiles

Bonjour,

Oui, comme l'indique Daniel dans le premier point, on peut y arriver avec un tableau
mais, en plus de la vidéo intégrée, j'ai dû ajouter du texte avec espaces blancs dans la case :


<table>
    <caption></caption>
    <tbody>
        <tr>
            <td>Vidéo 1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <br><video controls="true"><source src="https://youtu.be/M8DIZyBMBRI">https://youtu.be/M8DIZyBMBRI</video></td>
            <td>Vidéo 2 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <br><video controls="true"><source src="https://youtu.be/M8DIZyBMBRI">https://youtu.be/M8DIZyBMBRI</video></td>
        </tr>
    </tbody>
</table>


J'ai laissé la case "Légende". Pour la supprimer, enlever le code : 

<caption></caption>
Christian
Moyenne des évaluations  -
En réponse à Christian Bocquet

Re: probleme alignement videos

par chris heurtin,
Merci, je vais tester tout ça, la solution tableau me semble la plus simple et abordable pour moi, je ne sais pas ce qu'est une étiquette bootstrap mais je vais chercher un peu.
Moyenne des évaluations  -
En réponse à Daniel Méthot

Re: probleme alignement videos

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Bonjour,

Une piste ?
Je pense aussi aux plugins ligthbox gallery ou media gallery pour y intégrer des vidéos sous forme de galerie défilante.

Extrait de mon cours.

Le plugin Lightbox Gallery

Utile: Ce plugin tiers permet aussi d'intégrer des vidéos et des enregistrements audios ... 

  1. Si votre administrateur a installé ce plugin vous le voyez apparaître dans la liste des modules (onglet ressources) de cette façon.
    galerie d'images Avec le texte d'explications associé suivant :

    La ressource galerie d'images permet aux participants de voir une galerie d'images. Cette ressource vous permet de créer des galeries d'images dans votre cours Moodle. En tant qu'enseignant, vous avez la possibilité de créer, éditer et effacer des galeries. Des miniatures seront générées et seront utilisées pour l'affichage de la galerie. Un clic sur l'une de ces miniatures donnera le focus à l'image sélectionnée et permettra de faire défiler la galerie à votre guise. Utiliser les scripts Lightbox permet d'obtenir de jolis effets de transition au chargement et au défilement des images. Optionnellement (si cette option est activée), les utilisateurs pourront laisser des commentaires sur votre galerie.
    Dans votre cours, selon le thème graphique choisi, l'icône associée à cette ressource pourrait se présenter ainsi : 
    Dans une étiquette, le lien vers la galerie peut être visible ainsi : 

Moyenne des évaluations  -