Audio uniquement avec le lecteur Brightcove

Introduction

Le lecteur Brightcove prend en charge la lecture de ressources audio uniquement, soit avec l'interface utilisateur du lecteur masquée à l'exception de la barre de contrôle, soit avec l'image de l'affiche affichée en permanence pendant la lecture

Mode audio uniquement

Mode poster audio

Exemple

Cet exemple montre une ressource audio avec le lecteur Brightcove configuré pour le mode poster audio. Ici, l'image de l'affiche est affichée dans le lecteur pendant la lecture.

Voir le stylo Untitled de Brightcove Learning Services(@rcrooks1969) sur CodePen.

Utilisation du CodePen

Voici quelques conseils pour utiliser efficacement le CodePen ci-dessus :

Basculez l'affichage réel du joueur en cliquant sur le Result bouton.
Cliquez sur les HTML/CSS/JS boutons pour afficher L'UN des types de code.
Cliquez sur le EDIT ON CODEPEN bouton dans le CodePen et ayez le code disponible dans un onglet navigateur/navigateur.

Dans CodePen, réglez le code que vous souhaitez afficher. Vous pouvez modifier la largeur de différentes sections de code dans CodePen.

Exigences

Les exigences suivantes sont nécessaires pour cette fonctionnalité :

Lecteur Brightcove v6.65.1 et versions ultérieures

Notes de mise en œuvre

Lorsque vous utilisez des ressources audio avec le lecteur Brightcove, vous disposez de deux options pour personnaliser le lecteur :

Mode audio uniquement
Mode Poster Audio

Les deux modes ne peuvent pas être activés en même temps.

Si audio_only_mode les deux audio_poster_mode sont définis sur true dans la configuration du lecteur, le mode audio uniquement aura la priorité.
L'activation d'un mode par programmation via player.audioOnlyMode(true) ou player.audioPosterMode(true) désactivera l'autre mode s'il est activé.

Mode audio uniquement

Dans ce mode, toute l'interface utilisateur du joueur est masquée, à l'exception de la barre de contrôle.

Ce mode modifie les dimensions du joueur. La hauteur verticale du lecteur Audio Only est de 45px.

Mode Poster Audio

Dans ce mode, l'image du poster est affichée en permanence pendant la lecture. Les dimensions du lecteur restent les mêmes que celles d'un lecteur vidéo dans ce mode.

Mise en œuvre à l'aide de la configuration

Le mode de lecture audio peut être défini dans la configuration du lecteur.

Dans Video Cloud Studio, sélectionnez le module Players , puis JSON Editor.
Dans l'éditeur, ajoutez l'un des éléments suivants :
```
"audio_only_mode": true
```
OR
```
"audio_poster_mode": true
```
Cliquez sur Save.
Publier les modifications apportées au lecteur.

Implémenter à l'aide du code d'intégration

Une autre option pour mettre en œuvre le mode audio consiste à mettre à jour le code d'intégration du lecteur sur votre page web.

Activer/désactiver le mode audio

Le mode audio peut être activé ou désactivé de manière asynchrone en appelant les méthodes suivantes qui renvoient un Promise.

player.audioOnlyMode(true|false)

OR

player.audioPosterMode(true|false)

Vérifier l'état du mode audio

Lorsqu'elles sont appelées sans arguments, ces méthodes renvoient une Boolean valeur indiquant l'état actuel du mode audio.

player.audioOnlyMode()

OR

player.audioPosterMode()

Étapes

Dans Video Cloud Studio, sélectionnez le module Médias et choisissez une vidéo.
Sélectionnez Publier et intégrer, puis copiez le code d'intégration avancé .

Voici un exemple utilisant l'implémentation Advanced Embed pour définir le mode audio du lecteur.

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

<!-- custom script -->
<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;

    // Set either audio only mode OR audio poster mode
    myPlayer.audioOnlyMode(true);
    // myPlayer.audioPosterMode(true);
  });
</script>