Taille réactive pour Brightcove Player

Dans cette rubrique, vous apprendrez à créer un lecteur vidéo réactif qui se redimensionne en fonction des dimensions de l'écran.

Introduction

Le dimensionnement réactif signifie le redimensionnement du lecteur en réponse aux changements de taille de la fenêtre de délimitation, tout en conservant le rapport hauteur / largeur, de sorte que la vidéo ne soit pas en boîte aux lettres (voir l'image ci-dessous).

Échantillon de boîte aux lettres
Échantillon de boîte aux lettres

Lorsque vous intégrez un lecteur vidéo dans une page, vous remarquerez qu'il ne se redimensionnera pas avec la fenêtre du navigateur. Cela se produit car, par défaut, le lecteur vidéo a une largeur et une hauteur fixes, ce qui l'empêche de répondre aux modifications du navigateur. L'un des aspects de la conception Web réactive consiste à garantir que les éléments de votre page s'adaptent parfaitement aux différentes tailles d'écran.

Le joueur

Redimensionnez le navigateur pour voir comment le lecteur vidéo se redimensionne tout en conservant le rapport hauteur / largeur de la vidéo. Vous ne devriez pas voir de boîte aux lettres autour de la vidéo. Notez que cette page de document a une largeur maximale pour le contenu.

Fonctionnement

Les sections suivantes expliquent le lecteur et le code HTML utilisé dans l'exemple.

Créez un lecteur réactif

Bien que vous puissiez ajouter manuellement du HTML au code d'intégration de votre lecteur pour créer un lecteur réactif, le moyen le plus simple est d'utiliser le Joueurs module dans Studio.

Suivez ces étapes pour créer un lecteur réactif:

  1. dans le Joueurs module, créez un nouveau lecteur ou utilisez un lecteur existant et cliquez sur le nom du lecteur pour modifier ses propriétés.
  2. Localisez le Informations sur le joueur section.
  3. Met le Dimensionnement propriété à Sensible.
    Paramètres de taille réactive
    Paramètres de taille réactive

  4. Facultatif: Vous pouvez ajouter un largeur propriété dans le Dimensions du joueur réglage. Avec un lecteur réactif, cela définit une largeur maximale pour le lecteur.

  5. Cliquez sur Save.
  6. Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
  7. Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.

  8. Dans le Médias module, sélectionnez une vidéo et publiez-la avec ce lecteur.Attribuez du contenu vidéo au lecteur et publiez-le.

    Publication du module média
    Publication du module média
  9. Copiez le code d'intégration standard (iframe) ou avancé (encart) et collez-le dans un nouveau fichier HTML.

Le lecteur intègre le code

Lorsque vous copiez le code d'intégration standard (iframe) dans votre page HTML, notez que le lecteur est encapsulé en deux <div> conteneurs. Votre code doit ressembler à ce qui suit :

  • Lignes 1-9: Il s'agit du code d'intégration que vous avez copié lors de la publication d'une vidéo avec le lecteur.
  • Ligne 1 : Définit un conteneur externe qui définit la largeur maximale du lecteur. La valeur par défaut est définie sur 100%. Si vous définissez une largeur dans Studio, votre lecteur sera réactif jusqu'à la taille de largeur maximale.
  • Ligne 2 : Définit un conteneur interne qui utilise un rapport intrinsèque pour définir la hauteur et conserver le rapport hauteur / largeur correct. Pour en savoir plus, consultez le Comprendre le ratio intrinsèque section.
  • Lignes 3-7 : Contient le code du lecteur pour l'implémentation iframe. Notez que la ligne 3 a un style attribut qui positionne le joueur pour remplir son conteneur parent. Cela permet au lecteur de changer de taille lorsque le navigateur change de taille.
<div style="position: relative; display: block; max-width: 960px;">
  <div style="padding-top: 56.25%;">
    <iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?videoId=5802784116001"
      allowfullscreen=""
      allow="encrypted-media"
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

exemple iframe

Lorsque vous copiez le code d'intégration standard (iframe) dans votre page HTML, votre code doit ressembler à ceci:

<div style="position: relative; display: block; max-width: 960px;">
  <div style="padding-top: 56.25%;">
    <iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?videoId=5802784116001"
      allowfullscreen=""
      allow="encrypted-media"
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

Exemple d'intégration sur la page

Lorsque vous copiez le code d'intégration avancé (encart) dans votre page HTML, votre code doit ressembler à ceci:

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
<title>Responsive Brightcove Player</title>

</head>

<body>

  <div style="max-width: 960px;">
    <video-js data-account="1752604059001"
      data-player="default"
      data-embed="default"
      controls=""
      data-video-id="5802784116001"
      data-playlist-id=""
      data-application-id=""
      class="vjs-fluid"></video-js>
  </div>
  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

</body>
</html>
<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
<title>Responsive Brightcove Player</title>

</head>

<body>
<div style="position: relative; display: block; max-width: 640px;">
<div style="padding-top: 56.25%;">
  <video-js
    data-account="1752604059001"
    data-player="VyqgG8mql"
    data-embed="default"
     data-application-id=""
     controls=""
    style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video-js>
  <script src="https://players.brightcove.net/1752604059001/VyqgG8mql_default/index.min.js"></script>
</div>
</div>

</body>
</html>

Comprendre le ratio intrinsèque

Dans cette solution, vous avez utilisé un ratio intrinsèque, qui est une technique CSS permettant de contraindre de manière fluide un élément enfant à un ratio défini dans son élément parent. Pour ce faire, vous avez ajouté un <div> conteneur autour du lecteur vidéo et vous avez défini la padding-top propriété avec le rapport hauteur/largeur souhaité pour la vidéo.

La propriété padding permet d'attribuer à une zone un format intrinsèque. En effet, cette propriété correspond à un pourcentage de la largeur du bloc conteneur. Cette technique fonctionne très bien car les styles de redimensionnement (padding) sont pris en charge par tous les navigateurs les plus courants.

Le rapport hauteur / largeur est déterminé par un simple calcul pour déterminer un pourcentage. Par exemple, calculez le pourcentage pour une vidéo au format 16: 9 en divisant 9 par 16 (c'est-à-dire 9/16 = 0,5625) pour obtenir 56,25%. Pour une vidéo 16:9, la hauteur doit représenter 9/16e de la largeur.

Utilisation du rapport hauteur/largeur

Dans cette solution, vous avez utilisé le ratio d'aspect, une propriété CSS qui définit un ratio d'aspect préféré pour la boîte, utilisé pour calculer les tailles automatiques et d'autres fonctions de mise en page.

Pour calculer le rapport hauteur/largeur, il faut diviser la largeur et la hauteur de la vidéo. Ces valeurs se trouvent dans la section des fichiers vidéo sous les dimensions dans le module médias.

Largeur et hauteur de la vidéo
Largeur et hauteur de la vidéo

Pour ce faire, vous ajoutez la propriété de style aspect-ratio à l'intérieur de <div> et vous divisez les valeurs correspondant à la largeur et à la hauteur.

<div style="position: relative; display: block; max-width: 100%;">
  <div style="aspect-ratio: 480/270;">
    <iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?videoId=5802784116001"
      allowfullscreen=""
      allow="encrypted-media"
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

Pour le code d'intégration avancé, votre code devrait ressembler à ceci : 

<div style="max-width: 960px; aspect-ratio: 480/270 !important;">
  <video-js data-account="1752604059001"
    data-player="default"
    data-embed="default"
    controls=""
    data-video-id="4093643993001"
    data-playlist-id=""
    data-application-id=""
    class="vjs-fluid"></video-js>
  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
</div>

Utilisation du mode fluide

La bibliothèque Video.js v5.0.0 + a été mise à jour pour prendre en charge des classes réactives simples. Ces classes sont prises en charge par Brightcove Player lors de l'utilisation du code d'intégration avancé (encart).

Les classes réactives comprennent les éléments suivants:

Classe Défaut Rapport d'aspect
vjs-fluid Oui 2,4: 1
vjs-16-9 Non 16:9
vjs-4-3 Non 4:3

Les classes de fluides répertoriées ci-dessus appliquent le dimensionnement réactif au lecteur. Ils accomplissent cela en appliquant un padding-top attribut au video élément.

Pour créer un lecteur réactif qui remplit le navigateur, ajoutez l'une des classes fluides au code d'intégration de votre lecteur. Par exemple, pour utiliser un rapport hauteur / largeur 16: 9, votre code doit ressembler à ceci:

<video-js data-video-id="5802784116001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id
  class="video-js vjs-16-9"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

Si vous souhaitez définir une taille maximale pour votre lecteur, ajoutez simplement un div conteneur autour de votre code d'intégration et définissez le max-width ou max-height attribut. Par exemple, ce code limite la taille du lecteur à 640px:

<div style="max-width: 640px;">
  <video-js data-video-id="5802784116001"
    data-account="1752604059001"
    data-player="default"
    data-embed="default"
    data-application-id=""
    class="video-js vjs-16-9"
    controls=""></video-js>
  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
</div>