Dimensionnement du joueur

Remarque : Ce document détaille la définition de la taille fixe du joueur, c'est-à-dire la définition width des height attributs et. Pour créer un lecteur de taille adaptée, consultez le document Taille adaptée pour le lecteur Brightcove .

Considérations de dimensionnement

Il y a deux concepts importants à garder à l'esprit lors du dimensionnement de la vidéo et du lecteur:

Rapport hauteur / largeur - Les propriétés de largeur et de hauteur du média, définies dans votre instruction curl lors de la création d'un lecteur, définissent les dimensions vidéo intrinsèques, également appelées rapport hauteur / largeur.
Taille du lecteur - Les propriétés de largeur et de hauteur du lecteur, définies dans le code CSS ou HTML, contrôlent la taille du lecteur. Lorsque vous modifiez la taille du lecteur, il utilisera les dimensions vidéo intrinsèques pour maintenir les commandes correctement positionnées.

Définir le rapport hauteur / largeur

Le rapport hauteur / largeur de la vidéo est la relation entre la largeur et la hauteur. Les téléviseurs classiques utilisent un format d'image 4: 3, tandis que l'écran large utilise un format d'image 16: 9.

Lorsque vous créez un lecteur, vous pouvez spécifier la largeur et la hauteur de la vidéo à l'aide de Studio. Utilisez le Players module, Informations sur le joueur section.

Le rapport hauteur / largeur de la vidéo restera le même et les commandes du lecteur seront positionnées correctement lorsque le lecteur se redimensionnera en réponse.

Utilisation d'un rapport incorrect

Lorsque vous spécifiez un rapport hauteur / largeur du média différent des dimensions de votre vidéo, vous obtiendrez une boîte aux lettres autour de la vidéo et les commandes du lecteur ne seront pas positionnées sur la vidéo.

Ici, nous définissons la largeur et la hauteur du support sur respectivement 640px et 480px (rapport hauteur / largeur 4: 3), tout en utilisant la vidéo Tiger qui a un rapport hauteur / largeur 16: 9.

Utiliser le bon ratio

Lorsque les dimensions du média correspondent au rapport hauteur / largeur de votre vidéo, il n'y a pas de boîte aux lettres et les commandes du lecteur restent positionnées correctement lorsque vous redimensionnez le lecteur.

Ici, nous définissons la largeur et la hauteur du support sur respectivement 640px et 360px (rapport hauteur / largeur 16: 9), ce qui est identique à la vidéo Tiger.

Définir la taille du joueur

Vous pouvez définir la taille du lecteur à l'aide de Studio. Utilisez le Joueurs module, Informations sur le joueur section.

Vous pouvez également utiliser CSS pour dimensionner le lecteur, comme détaillé dans les sections suivantes.

Utiliser le standard (iframe)

Pour l'implémentation Standard (iframe), la taille du lecteur peut être définie en fournissant le width et height attributs pour le iframe élément. Il existe plusieurs façons de le faire :

Ajouter des attributs à l' iframe élément
Utiliser CSS avec l' iframe élément
Utiliser CSS avec un id attribut

Remarque : En réglant le width et height attributs, vous créez un lecteur dont la taille est fixe. Pour créer un lecteur de dimensionnement réactif, reportez-vous au document Adaptive Sizing for the Brightcove Player.

Ajouter des attributs à l' `iframe` élément

Ajoutez et définissez le width et height attributs à la iframe élément.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>
</head>

<body>

  <iframe src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.html?videoId=6116766236001"
    allowfullscreen=""
    allow="encrypted-media"
    width="960" height="540"></iframe>

</body>
</html>

Lors de l'utilisation de la width et/ou height attributs en ligne avec les implémentations de lecteur standard (iframe) ou intégré dans la page, les unités sont des pixels. Vous pouvez inclure le px après le nombre, mais techniquement cette syntaxe HTML n'est pas appropriée. Voir le Utiliser des pourcentages plus loin dans ce document pour savoir comment utiliser les valeurs en pourcentage.

Utiliser CSS avec l' `iframe` élément

Dans CSS, définissez le width et height attributs pour le iframe élément.

<!-- Page styles -->
<style>
  iframe {
      width: 640px;
      height: 360px;
   }
</style>

Utiliser CSS avec un `id` attribut

En CSS, faites référence à un id ajouté à la iframe élément. Cette approche est utile si vous en avez plusieurs iframe élément sur la page.

<!-- Page styles -->
<style>
  #myPlayer {
    width: 640px;
    height: 360px;
  }
</style>
...
<iframe id="myPlayer" ...

Utiliser Advanced (in-page embedded)

Pour l'implémentation avancée (intégration dans la page), la taille du lecteur peut être définie en fournissant les attributs width et la hauteur de l' video élément. Il existe plusieurs façons de le faire :

Ajouter des attributs à l' video élément
Utiliser CSS avec l'attribut de classe
Utiliser CSS avec un id attribut

Remarque : En réglant le width et height attributs, vous créez un lecteur dont la taille est fixe. Pour créer un lecteur de dimensionnement réactif, reportez-vous au document Adaptive Sizing for the Brightcove Player.

Ajouter des attributs à l' `video` élément

Ajoutez et définissez le width et height attributs à la video élément.

<video-js data-account="1507807800001"
  data-player="rf1BTdKk6M"
  data-embed="default"
  controls=""
  data-video-id="6116766236001"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.min.js"></script>

Utiliser CSS avec l'attribut de classe

le video L'élément a un attribut de classe qui peut être référencé à partir de CSS pour définir la taille du lecteur.

<!-- Page styles -->
<style>
  .video-js {
    width: 640px;
    height: 360px;
  }
 </style>

Utiliser CSS avec un `id` attribut

En CSS, faites référence à un id ajouté à la video élément. Cette approche est utile si vous en avez plusieurs video élément sur la page.

<!-- Page styles -->
<style>
  #video_1 {
    width: 640px;
     height: 360px;
  }
</style>
...
<video-js id="video_1" ...

Utilisation de pourcentages

Lors de l'utilisation du height et / ou width attributs sur Brightcove Playerer Standard (iframe) ou video balises, ces attributs sont mesurés en pixels seulement. En fait, vous n'entrez aucune unité pour le height et width attributs (vous pouvez saisir le px , mais techniquement c'est du HTML invalide):

width="480"

Vous pouvez utiliser des pourcentages, et cela peut être accompli en utilisant CSS de deux manières différentes:

Utilisation d'un style attribut dans la video balise.

<video-js data-video-id="5622718636001"
  data-account="1507807800001"
  data-player="default"
  data-embed="default"
  data-application-id
  controls=""
  style="width: 100%;height: 100%"></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>

Utiliser une style balise.

...
<style>
    .video-js {
      height: 100%;
      width: 100%;
    }
</style>
...
<video-js data-account="1752604059001"
  data-player="H1xW7NWcz"
  data-embed="default"
  data-application-id
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/H1xW7NWcz_default/index.min.js"></script>

Affichage plein écran

Avec les navigateurs plus récents, qui prennent en charge l'API plein écran, vous devez appliquer des règles CSS dans les pages pour que le lecteur s'adapte à une échelle de 100 % lorsque vous passez au mode plein écran. Dans le cas contraire, le lecteur s'affichera dans les dimensions originales en mode plein écran.

Utilisez le CSS suivant pour vous assurer que le lecteur évolue en mode plein écran:

/***************************
* Fullscreen display      *
***************************/
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
}
.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}
.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

Ordre de préséance

Vous avez vu un certain nombre de façons de dimensionner le lecteur. Voici une liste par ordre de priorité:

Modifications d'exécution (utilisez JavaScript pour modifier la taille du lecteur)
Taille définie dans la balise <video-js>
CSS (suivant les règles normales d'héritage)
Paramètres de configuration du lecteur

Taille dans l'API du lecteur

Il existe 4 méthodes de lecture dans l'API du lecteur qui renvoient des tailles en pixels, mais il est important de comprendre la différence entre elles.

.height()- renvoie la hauteur définie dans le height attribut du video balise (si cet attribut n'est pas défini, height() renverra 0)
.width()- renvoie la largeur définie dans le width attribut du video balise (si cet attribut n'est pas défini, width() renverra 0)
.currentHeight()- renvoie la hauteur actuelle du lecteur, quelle que soit la manière dont elle a été définie
.currentWidth()- renvoie la largeur actuelle du lecteur, quelle qu'elle soit

Dans la plupart des cas, currentHeight() et currentWidth() sont les méthodes que vous souhaitez utiliser.

Dimensionnement du joueur

Considérations de dimensionnement

Définir le rapport hauteur / largeur

Utilisation d'un rapport incorrect

Utiliser le bon ratio

Définir la taille du joueur

Utiliser le standard (iframe)

Ajouter des attributs à l' iframe élément

Utiliser CSS avec l' iframe élément

Utiliser CSS avec un id attribut

Utiliser Advanced (in-page embedded)

Ajouter des attributs à l' video élément

Utiliser CSS avec l'attribut de classe

Utiliser CSS avec un id attribut

Utilisation de pourcentages

Affichage plein écran

Ordre de préséance

Taille dans l'API du lecteur

Ajouter des attributs à l' `iframe` élément

Utiliser CSS avec l' `iframe` élément

Utiliser CSS avec un `id` attribut

Ajouter des attributs à l' `video` élément

Utiliser CSS avec un `id` attribut