Video - DsfrVideo

Les contenus médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégrés à une page de contenu, il est recommandé de suivre les règles décrites ci-dessous.

🏅 La documentation sur les contenus médias sur le DSFR

La story sur le contenus média video sur le storybook de VueDsfr

🌟 Introduction

Le composant DsfrVideo permet d'intégrer une vidéo responsive avec une légende et une transcription. Il s'agit d'une solution complète pour afficher des vidéos dans une interface utilisateur, tout en fournissant des fonctionnalités d'accessibilité telles que la transcription du contenu vidéo.

Le DsfrVideo utilise un élément <iframe> pour intégrer la vidéo de manière responsive. Il ajuste automatiquement la taille et le ratio de la vidéo en fonction des props fournies. Le composant inclut également un sous-composant DsfrTranscription pour afficher la transcription du contenu vidéo, améliorant ainsi l'accessibilité.

📐 Structure

• <DsfrVideo> : Le composant principal.
  • Affiche une vidéo à partir d'une URL.
  • Inclut une légende sous la vidéo.
  • Intègre une transcription optionnelle via le composant DsfrTranscription.

🛠️ Props

Propriété	Type	Description	Valeur par défaut
src	string	URL de la vidéo à afficher.	obligatoire
legend	string	Légende à afficher sous la vidéo.	''
size	'small' | 'medium' | 'large'	Taille de la vidéo (petite, moyenne, ou grande).	'medium'
transcriptionTitle	string	Titre de la transcription (si disponible).	''
transcriptionContent	string	Contenu de la transcription (si disponible).	''
ratio	string	Ratio de la vidéo (par exemple, '16x9').	'16x9'

📡Événements

Ce composant ne déclenche pas d'événements spécifiques.

🧩 Slots

Ce composant n'utilise pas de slots.

📝 Exemples

Démo

Code de la démo

<script lang="ts" setup>
import DsfrVideo from '../DsfrVideo.vue'

const size = 'medium'
const src = 'https://www.youtube.com/embed/HyirpmPL43I'
const legend = 'Vidéo traitant du Service National Universel'
const transcriptionTitle = 'Titre de la transcription'
const transcriptionContent = 'Contenu de la transcription'
const ratio = '16x9'
</script>

<template>
  <DsfrVideo
    :src="src"
    :legend="legend"
    :size="size"
    :transcription-title="transcriptionTitle"
    :transcription-content="transcriptionContent"
    :ratio="ratio"
  />
</template>

⚙️ Code source du composant

DsfrVideo.vue

<script lang="ts" setup>
import type { DsfrVideoProps } from './DsfrMedia.types'

import DsfrTranscription from '../DsfrTranscription/DsfrTranscription.vue'

import { useRandomId } from '@/utils/random-utils'

export type { DsfrVideoProps }

withDefaults(defineProps<DsfrVideoProps>(), {
  legend: '',
  transcriptionTitle: '',
  transcriptionContent: '',
  ratio: '16x9',
  size: 'medium',
})

const ariaLabelledbyId = useRandomId('dsfr-video', 'caption')
</script>

<template>
  <figure
    class="fr-content-media"
    :class="{
      'fr-content-media--sm': size === 'small',
      'fr-content-media--lg': size === 'large',
    }"
  >
    <div
      class="fr-responsive-vid"
      :class="`fr-ratio-${ratio}`"
    >
      <iframe
        :src="src"
        :aria-labelledby="`${ariaLabelledbyId}-caption`"
        class="fr-responsive-vid__player"
        width="100%"
        height="100%"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
      />
    </div>
    <div
      :id="`${ariaLabelledbyId}-caption`"
      class="fr-content-media__caption"
    >
      {{ legend }}
    </div>
  </figure>
  <DsfrTranscription
    :title="transcriptionTitle"
    :content="transcriptionContent"
  />
</template>

DsfrMedia.types.ts

export type DsfrVideoProps = {
  ariaLabelledbyId?: string
  src: string
  legend?: string
  size?: 'small' | 'medium' | 'large'
  transcriptionTitle?: string
  transcriptionContent?: string
  ratio?: string
}

export type DsfrPictureProps = {
  alt?: string
  legend?: string
  size?: 'small' | 'medium' | 'large' | undefined
  src?: string
  title?: string
  ratio?: string
}