Dans cet exemple, vous verrez après un laps de temps défini, un message de superposition s'affiche. Cet exemple affichera la superposition dans 6 secondes, mais l'heure est configurable. Si le spectateur clique sur le message dans un délai spécifié, la lecture se poursuit. Sinon, la vidéo est mise en pause. Cette technique est utile si vous avez un contenu de longue durée. Cela vous évitera de gaspiller de la bande passante sur les téléspectateurs qui commencent à lire une vidéo puis partent faire autre chose sans se soucier de l'arrêter.
Cet exemple utilise un plugin Open Source Video.js situé à l'adresse https://github.com/TylerZubke/Videojs-AFK-Monitor. L'exemple de code dans ce document utilisera ce plugin.
Voir le stylo Regardez-vous toujours? par Brightcove Learning Services ( rcrooks1969 ) sur CodePen.
Voir le solution complète sur GitHub.
Voici quelques conseils pour utiliser efficacement le CodePen ci-dessus :
Voici la séquence de développement recommandée :
Pour plus de détails sur ces étapes, consultez la section étape par étape : Guide de développement de plug-ins.
Lorsque vous développez des améliorations pour Brightcove Player, vous devrez décider si le code convient le mieux à l'implémentation intégrée iframe ou In-Page. La recommandation des meilleures pratiques consiste à créer un plugin à utiliser avec une implémentation iframe. Les avantages de l'utilisation du lecteur iframe sont les suivants :
Bien que l'intégration du lecteur d'intégration dans la page puisse être plus complexe, il y a des moments où vous planifiez votre code autour de cette implémentation. Pour généraliser, cette approche est préférable lorsque la page contenante doit communiquer avec le lecteur. En particulier, voici quelques exemples :
Même si votre implémentation finale n'utilise pas le code iframe, vous pouvez toujours utiliser le code intégré In-Page avec un plugin pour votre JavaScript et un fichier séparé pour votre CSS. Cela encapsule votre logique afin que vous puissiez facilement l'utiliser sur plusieurs joueurs.
| Méthodes API | Événements API | Plugins de lecteur Brightcove |
|---|---|---|
| AddClass () | utilisateur actif | Plugin de superposition |
| RemoveClass () | utilisateur inactif | |
| pause () | ||
| Heure actuelle () | ||
| un () | ||
| au() | ||
| setTimeout () | ||
| hasClass () | ||
| durée () | ||
| mis en pause () | ||
| clearTimeout () | ||
| a commencé() | ||
| el () |
Cette section détaille toute configuration spéciale nécessaire lors de la création du lecteur. En outre, d'autres éléments HTML qui doivent être ajoutés à la page, au-delà du code d'implémentation du lecteur intégré dans la page, sont décrits.
Aucune configuration spéciale n'est requise pour le lecteur Brightcove que vous créez pour cet exemple.
Les fichiers CSS et JavaScript du plugin tiers sont inclus.
La logique de base derrière cette application est la suivante :
useractive et userinactive les événements sont surveillés pour suivre le temps.Le plugin est appelé en utilisant les meilleures pratiques, comme indiqué ici
<script>
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
var options = {'showMessageAfter': 1000, 'pausePlayerAfter': 1000};
myPlayer.AFKMonitor(options);
});
</script>
Un certain nombre d'options peuvent être utilisées pour personnaliser le plugin. Quelques détails sont:
showMessageAfter (en millisecondes) détermine le délai avant l'affichage du bouton.
pausePlayerAfter (en millisecondes) est également utile. C'est le moment où vous autorisez l'utilisateur à cliquer sur le bouton avant que le lecteur ne soit mis en pause. Cela donne à l'utilisateur la possibilité de cliquer sur le bouton sans interrompre la lecture vidéo.Le CSS fait partie du plugin tiers.
Vous voudrez cloner le dépôt pour accéder au code, puis le placer dans un emplacement accessible par Internet pour votre utilisation.
Comme mentionné précédemment, vous pouvez voir le code JavaScript du plugin dans le référentiel GitHub correspondant de ce document: videojs.afk-monitor.js.
Une fois que les fichiers CSS et JavaScript du plugin sont stockés dans un emplacement accessible à Internet, vous pouvez utiliser le plugin avec un lecteur. Dans les studios JOUEURS module, vous pouvez choisir un joueur, puis dans le PLUGINS section ajouter les URL aux fichiers CSS et JavaScript, et également ajouter le Nom et Options , si des options sont nécessaires.