Plugin Picture-in-Picture (alias « flottant » ou « épinglé »)

Aperçu

Le mode image dans l'image permet aux utilisateurs d'effectuer plusieurs tâches à la fois. Une fois que la lecture vidéo a commencé, lorsque l'utilisateur fait défiler la page vers le bas, le mode image dans l'image repositionnera et épingler le lecteur dans un coin de la page Web.

Pourquoi cela s'appelle Picture-in-Picture

Le comportement activé par ce plugin est également appelé comportement «flottant» ou «épinglé». Brightcove utilise le terme «image dans l'image» en raison de l'adoption de ce verbiage par Apple et Google pour leurs navigateurs natifs. W3C normes référence également "image dans l'image".

Plugin Brightcove vs fonctionnalité native

La plupart des navigateurs modernes incluent désormais la fonctionnalité d'image dans l'image. Dans cette section, vous verrez les différences entre le plugin Picture-in-Picture et la fonctionnalité native. Ceci sera suivi des raisons pour lesquelles vous voudriez désactiver la fonctionnalité native et ajouter le plugin à votre lecteur.

Fonctionnalité du navigateur natif

Ce qui suit détaille le fonctionnement de l'image dans l'image du navigateur natif :

• Vous n'avez rien à faire pour activer la fonctionnalité, l'icône de l'image dans l'image sera dans la barre de contrôle.
• Le bouton icône fonctionne comme une bascule, les téléspectateurs activent et désactivent la fonctionnalité.
• La fonctionnalité native d'image dans l'image ouvre un lecteur de navigateur dans une toute nouvelle fenêtre de navigateur/système d'exploitation, qui peut être contrôlée indépendamment de la page Web qui l'a lancé. Par conséquent, le lecteur d'image dans l'image n'est PAS limité par le navigateur. Le lecteur d'image dans l'image apparaîtra en bas à droite de votre écran, quelle que soit la taille de votre navigateur.
• La vidéo dans Brightcove Player est "grisée" lorsque la fonctionnalité d'image dans l'image native est activée.

Découvrez comment cela fonctionne

Regardez cette vidéo pour voir l'implémentation native en cours d'utilisation :

Désactiver la fonctionnalité

Si vous souhaitez désactiver la fonctionnalité de navigateur natif, placez la ligne suivante de code JSON dans la configuration du lecteur à l'aide de Video Cloud Studio Éditeur JSON:

"picture_in_picture_control": false,

greffon Brightcove

Ce qui suit détaille le fonctionnement du plug-in Brightcove Player Picture-in-Picture :

• Une fois le plug-in installé, la visionneuse n'a PAS besoin d'effectuer d'action pour démarrer le lecteur d'image dans l'image, à part faire défiler le Brightcove Player principalement hors de vue. Il n'y a pas de bouton sur lequel cliquer pour activer l'image dans l'image.
• Lorsque la visionneuse fait à nouveau défiler le Brightcove Player, le lecteur d'image dans l'image disparaît automatiquement.
• Le lecteur d'image dans l'image est affiché (par défaut) dans le coin inférieur droit du navigateur. Contrairement à la fonctionnalité native, le plugin est limité par le navigateur.

Découvrez comment cela fonctionne

Regardez cette vidéo pour voir l'implémentation du plugin Brightcove Player en cours d'utilisation :

Pourquoi utiliser le plugin Brightcove Player ?

Avec la fonctionnalité native intégrée, et vous n'avez rien à faire, pourquoi voudriez-vous désactiver la fonctionnalité native et installer le plugin Brightcove Player ? Voici quelques-unes des raisons :

• Le lecteur natif ne diffuse pas les publicités côté client. Il diffusera les publicités SSAI, mais ne fournira pas les personnalisations de l'interface utilisateur que Brightcove Player fait et n'empêchera pas l'utilisateur de rechercher à travers/sur ces publicités.
• Vous voulez que la fonctionnalité d'image dans l'image soit limitée par le navigateur. Vous ne voulez pas que le lecteur d'image dans l'image soit placé en dehors de l'espace immobilier du navigateur.
• Vous voulez que la fonctionnalité soit effective sans aucune interaction de l'utilisateur.
• Le plugin fournit plus de personnalisation et plus facile à mettre en œuvre. Les options, méthodes et événements que vous pouvez utiliser avec le plugin sont répertoriés vers la fin de ce document.

Exemple de lecteur

Démarrez la lecture vidéo. (Vous pouvez alors l'arrêter). Faites défiler la page pour voir le lecteur d'image dans l'image dans le coin droit de la page Web. Vous pouvez fermer le lecteur d'image dans l'image ou revenir au lecteur en taille réelle.

Voir le stylo Plug-in Picture-in-Picture par Brightcove Learning Services ( bcls1969 ) sur CodePen.

Implémenter avec le module Players

Pour implémenter le Picture-in-Picture Plugin utilisant le module Players, suivez ces étapes:

1. Ouvrez le module PLAYERS et créez un nouveau lecteur ou localisez le lecteur auquel vous souhaitez ajouter le plugin.
2. Sélectionnez le lien pour que le joueur ouvre ses propriétés.
3. Sélectionnez Plugins dans le menu de navigation de gauche.

4. Ensuite, sélectionnez le Ajouter un plugin bouton, puis sélectionnez Plugin Brightcove.

   

5. Élargir le Plug-in Brightcove déroulant et sélectionnez Image dans l'image.

   

6. Facultatif: Entrez les options de configuration dans la zone de texte Options (JSON) . Un exemple de réglage de l'alignement horizontal du lecteur lorsqu'il est en mode image dans l'image est illustré ici:

   

   Voir le options section pour plus de détails.

7. Sélectionnez le sauvegarder bouton.

8. Vous allez maintenant voir le Image dans l'image plugin ajouté à la liste des plugins pour votre lecteur.

   

9. Pour publier le lecteur, sélectionnez Publier et intégrer > Publier les modifications.
10. Pour fermer la boîte de dialogue ouverte, sélectionnez Fermer.

11. Revenir au MÉDIAS module et publiez votre vidéo à l'aide du lecteur que vous venez de mettre à jour pour l'image dans l'image.

12. Dans un éditeur, copiez le code d'intégration du lecteur dans votre page Web.

13. Le plugin picture-in-picture requiert que votre lecteur soit enveloppé par un élément conteneur avec la classe définie sur vjs-pip-container. Votre code doit ressembler à ceci :

    <div class="vjs-pip-container">
      <video-js id="myPlayerID"
        data-video-id="5701202551001"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        width="640" height="360"
        controls=""></video-js>
      <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
    </div>

    Si l' <div> élément ci-dessus n'est pas trouvé comme parent du lecteur, le plugin ne parvient pas à s'initialiser et vous recevrez l'avertissement de journal suivant :

    VIDEOJS: WARN: expected player to be a child of a "vjs-pip-container" element, cannot continue with picture-in-picture plugin

14. Lorsque la lecture de la vidéo a commencé, faites défiler vers le bas pour voir le lecteur d'image dans l'image épinglé au bas de la page.

Implémenter à l'aide

Pour implémenter le plugin à l'aide de code personnalisé, vous allez configurer les propriétés suivantes du plugin :

• scripts - JavaScript fourni pour le plugin et ne changera pas pour différentes implémentations de plugin
• stylesheets - CSS fourni pour le plugin et ne changera pas pour différentes implémentations de plugin
• plugin name- Toujours pépin
• plugin options - Contient un tableau de propriétés et de valeurs

Pour ajouter le plugin à votre code, procédez comme suit :

1. Ajoutez les styles du plugin image dans l'image.

   <link href="https://players.brightcove.net/videojs-pip/1/videojs-pip.css" rel="stylesheet">

2. Ajoutez le fichier JavaScript pour inclure le plugin picture-in-picture.

   <video-js id="myPlayerID"
     data-video-id="5701202551001"
     data-account="1752604059001"
     data-player="default"
     data-embed="default"
     width="640" height="360"
     controls=""></video-js>
   <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
   
   <!-- Script for the picture-in-picture plugin -->
   <script src="https://players.brightcove.net/videojs-pip/1/videojs-pip.min.js"></script>

3. Enveloppez le code incorporé du lecteur dans un élément conteneur avec la classe définie sur vjs-pip-container. Le plugin image dans l'image nécessite que votre lecteur soit enveloppé par cet élément conteneur.

   <div class="vjs-pip-container">
       <video-js id="myPlayerID"
         data-video-id="5701202551001"
         data-account="1752604059001"
         data-player="default="
         data-embed="default="
         controls=""
         width="640" height="360"></video-js>
       <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
     </div>
   
           <!-- Script for the picture-in-picture plugin -->
           <script src="https://players.brightcove.net/videojs-pip/1/videojs-pip.min.js"></script>

   Si l' <div> élément ci-dessus n'est pas trouvé comme parent du lecteur, le plugin ne parvient pas à s'initialiser et vous recevrez l'avertissement de journal suivant :

   expected player to be a child of a "vjs-pip-container" element, cannot continue with picture-in-picture plugin

4. Ajoutez un code de script personnalisé qui effectue les opérations suivantes:
   • Lorsque le lecteur est prêt, obtient une référence au lecteur Brightcove. Dans cet exemple, nous créons une variable nommée myPlayer et nous lui attribuons une référence au lecteur.
   • Initialise le plugin picture-in-picture.

   videojs.getPlayer('myPlayerID').ready(function() {
     // When the player is ready, get a reference to it
     var myPlayer = this;
     // Initialize the picture-in-picture plugin
     myPlayer.pip();
   });

   Pour plus de détails, consultez le exemple codepen au dessus de.

Options

Vous pouvez transmettre un objet options au plugin lors de l'initialisation. Cet objet peut contenir l'une des options suivantes :

allowOnMobile

• :allowOnMobile
  • Type: boolean
  • Défaut : false

  • Par défaut, le mode image dans l'image ne fonctionnera pas sur les appareils mobiles Android ou iOS. La raison en est que ce positionnement fixe CSS ne fonctionne pas sur les appareils zoomables avec plusieurs fenêtres de la même manière que sur les appareils de bureau.

    Si vous souhaitez activer l'incrustation d'image sur les appareils mobiles pris en charge, vous pouvez le faire avec cette option. Dans certains cas, vous souhaiterez peut-être activer la prise en charge:

    • L'intégrateur est prêt à assumer la responsabilité de gérer le positionnement pour le mode lecteur image dans l'image.
    • Il est peu probable que le site Web utilisant le lecteur soit agrandi.
    • Le zoom a été désactivé à l'aide d'un user-scalable=no directif. L'utilisation de cette directive rendra position: fixed se comportent comme sur les ordinateurs de bureau, mais cela n'est pas spécifiquement recommandé car cela peut être un problème d'accessibilité.

      <meta name="viewport" content="width=device-width, user-scalable=no">

  • Exemple :

    // Allow mobile (iOS and Android) devices to enter PIP mode.
    player.pip({allowOnMobile: true});

fermable

• :closeable
  • Type: boolean
  • Défaut : true
  • Par défaut, le mode image dans l'image peut être désactivé par l'utilisateur en cliquant sur le bouton X bouton dans le coin supérieur droit du lecteur. Cette fonctionnalité peut être désactivée en passant false pour cette option.

  • Exemple :

    // Do not allow the user to close the PIP mode player.
    player.pip({closeable: false});

échelle

• :scale
  • Type: number
  • Défaut : 2 / 3
  • Le facteur de mise à l'échelle appliqué au lecteur lorsqu'il est en mode image dans l'image. Cette valeur doit être un nombre supérieur à zéro et inférieur ou égal à 1.

  • Exemple :

    // Detach the player, but do not change its size.
    player.pip({scale: 1});

  • Exemple 2 :

    // Detach the player, and change its size to 1/2.
    player.pip({scale: 0.5});

Hauteur et largeur

• height et width:
  • Type: number
  • Défaut : null

  • Par défaut, le plugin réduira les dimensions du lecteur par un facteur déterminé par le scale option. Cependant, fournir un height (ou width ) remplacera la mise à l'échelle par défaut et définira explicitement la taille du lecteur à échelle réduite.

    Si une seule dimension est fournie, l'autre sera réduite pour conserver les proportions. Si les deux dimensions sont fournies, le lecteur sera réglé sur la taille exacte et spécifiée, ce qui permettra un changement de rapport hauteur / largeur.

  • Exemple :

    // Detach the player and set its width to 300 pixels. Scale its height to
    // maintain its current aspect ratio.
    player.pip({width: 300});

posX

• :posX
  • Type: string
  • Défaut : "right"

  • L'alignement horizontal du lecteur lorsqu'il est en mode image dans l'image - "droite" ou "gauche".

  • Exemple :

    // When the player is in PIP mode, align it to the left side of the viewport.
    player.pip({posX: 'left'});

posY

• :posY
  • Type: string
  • Défaut : "bottom"

  • L'alignement vertical du lecteur lorsqu'il est en mode image dans l'image - "haut" ou "bas".

  • Exemple :

    // When the player is in PIP mode, align it to the top of the viewport.
    player.pip({posY: 'top'});

visible

• :viewable
  • Type: number
  • Défaut : 0.8

  • Le seuil auquel le joueur est considéré comme visible. En d'autres termes, lorsque ce pourcentage de la zone totale du lecteur (hauteur et largeur) est visible dans la fenêtre du navigateur, il est considéré comme visible.

    Par exemple, avec la valeur par défaut de 0,8, le lecteur n'est pas considéré comme visible à moins que 80% de celui-ci ne soit visible dans la fenêtre. le viewable la valeur doit être un nombre supérieur ou égal à 0 et inférieur ou égal à 1.

  • Exemple :

    // If more than half the player is outside of the viewport, activate PIP mode.
    player.pip({viewable: 0.5});

manualContainerSize

• :manualContainerSize
  • Type: boolean
  • Défaut : false

  • Par défaut, un lecteur avec ce plugin activé gardera les dimensions physiques de l'élément conteneur spécial synchronisées avec les dimensions du lecteur. Cependant, ce comportement peut ne pas fonctionner pour tous les cas d'utilisation, il peut donc être désactivé en définissant cette option sur true.

    Ce faisant, l'élément conteneur se comportera comme un élément de bloc normal. Cela signifie que les utilisateurs du plugin devront gérer eux-mêmes sa taille.

    Cette option peut également être définie dans le code d'intégration via le booléen data-manual-container-size attribut sur le conteneur. Sa présence définira cette option sur true. Notez que toute valeur transmise au plugin aura priorité sur toute valeur définie dans le code d'intégration.

  • Exemple :

    // Implementation will handle sizing the container.
    player.pip({manualContainerSize: true});

  • Exemple utilisant le data-manual-container-size attribut sur le conteneur:

    <div class="vjs-pip-container" data-manual-container-size>
      <video-js class="video-js vjs-default-skin">
      </video-js>
    </div>

Utiliser les options

Vous pouvez utiliser cette option de deux manières :

1. Dans les studios JOUEURS> PLUGINS section.
2. Utiliser JavaScript avec le lecteur.

Utilisation de Studio

Dans Studio, modifiez le lecteur et revenez à la Plugins section. Cliquez sur Picture-in-Picture dans la liste des noms. En utilisant le format JSON approprié, indiquez l'option (entre guillemets), suivie de la valeur appropriée. Si les valeurs sont des chaînes, elles doivent être entre guillemets. S'ils sont numériques ou booléens, les guillemets ne peuvent pas être inclus:

Utilisation de JavaScript

Pour implémenter les options dans le code, vous créez un objet, attribuez aux options souhaitées leurs valeurs respectives, puis transmettez l'objet options lors de l'appel du plugin :

videojs.getPlayer('myPlayerID').ready(function() {
  // When the player is ready, get a reference to it
  var myPlayer = this,
      options = {};

  options.scale = 0.5;
  options.posX = "left";
  // Initialize the picture-in-picture plugin
  myPlayer.pip(options);
});

Méthodes

Les méthodes suivantes vous permettent d'interagir avec le plugin picture-in-picture:

Evénements

Les événements suivants sont déclenchés à partir du plugin picture-in-picture:

Changelog

Voir le Notes de version du plug-in Picture-in-Picture.

Pour les notes de version historiques, voir le changelog ici.