Media player

Ce composant affiche et gère les médias dans la page.

Aperçu

Ce composant affiche et gère les médias appellés dans une page et les synschronise avec les playbar. Ce composant est utilisé seulement en mode Full minou. Donne une message d'erreur en mode Dr.

Comportement

Affiche le média (audio ou vidéo) qui est appelé. Par défaut, mets la vidéo en pleine écran selon l'espace de la fênetre. Si le composant est appellé avec une animation, il crée un div ou s'affiche les éléments à animer. Affiche les sous-titres, si ils sont présents.

Paramètre

Lors de l'appelle du composant, vous pouvez paramètrer les paramètres suivant :

• fullScreen: Si vous voulez afficher la vidéo full screen (dans l'espace désigner) (Par défaut le paramètre est à true.)

Événement

Lors de l'appel de la composante, vous pouvez écouter l'événement suivant :

• playbackEnd: Événement appelé lorsque la lecture de la vidéo/animation est complétée

<template>
  <app-comp-media-player :m-data="pageMedia" @playbackEnd="onPlaybackEnd">
</template>

...
<script>
  methods: {
    onPlaybackEnd() {
      console.log('lecture terminée')
    }
  },
</script>

Style

Vous pouvez ajouter toutes les classes possible à l'appelle du composant. Par défaut, il possède déjà les classes suivantes :

• app-media-player
• animation (si il y a une animation)
• FS (si pas mis à false )
• le type animation
• m-audio ou m-video

Accessibilité

Pour l'accessibilité nous sommes tenus responsable de mettre les sous-titres qui accompagne le média avec narration.

<script>
 mSubtitle: {
          label: "Français", //langue
          src: require("@/chemin_demon_element.vtt"), // fichier sous-titre
          srclang: "fr" // abréviation pour la langue
        }
</script>