Documentation sur l'audio-vidéo
Lecteur média
Le lecteur média de Radio-Canada est un lecteur universel pour nos différents sites. Il est aussi à la disposition de nos partenaires afin de leur permettre de rendre accessibles des contenus audio-vidéo, de type « sur demande » ou « en direct » sur tous les fureteurs, incluant les fureteurs de téléphones intelligents et tablettes.
Les fonctionnalités du lecteur sont, pour la plupart, paramétrables et peuvent être activées ou désactivées au besoin. Une API publique permet aussi d’utiliser le lecteur avec le langage Javascript.
Mise en garde concernant l’utilisation du iframe
Vous devez éviter d’utiliser le lecteur média dans un iframe à cause des restrictions suivantes
La fonctionnalité de plein écran n’est pas disponible sur IPad (le bouton est masqué).
Pour le mobile, la publicité ne jouera pas sur IOS et Android.
Compatibilité avec les navigateurs web et devices
Les navigateurs supportés, ainsi que les versions sont indiqués ici dans la section “Navigateurs supportés sur desktop”.
Incompatibilités identifiées :
le lecteur audio n’est pas compatible avec le navigateur IE11.0.
La vidéodescription ne fonctionne pas sur Nexus 7 et 5 pour l’OS version 4.4. Il faut mettre à jour l’OS avec une version plus récente (opérationnel à partir de Android 6.0).
Nouvelle console audio/vidéo
8 octobre 2020
Le lecteur média a fait peau neuve, une version améliorée est maintenant disponible. Voici comme l'intégrer.
Intégration du lecteur média
Voici les étapes à suivre pour intégrer le lecteur média.
1- Chargement du script
Script JS
Utiliser l'une des URL suivantes:
DEV: https://services.radio-canada.ca/media/player/js/dev?version=latest
PROD: https://services.radio-canada.ca/media/player/js/prod?version=latest
Le paramètre "version" permet de charger une version spécifique du lecteur, si non spécifiée, la plus récente version est chargée.
Package NPM
Se connecter au registre playerweb en suivant les instructions.
https://dev.azure.com/rcmn/www.radio-canada.ca/_packaging?_a=connect&feed=medianumerique%40Local
Définir le package playerjs-v2 sur le registre playerweb. Dans le fichier .npmrc du projet, ajouter la ligne suivante:
@cbcradcan:registry=https://pkgs.dev.azure.com/rcmn/_packaging/medianumerique/npm/registry/
Installer le package NPM @radcan/playerjs-v2
npm install @cbcradcan/playerjs-v2 --save-dev
Pendant l'installation, si des dépendances sont manquantes, elles seront affichés en warning.
Installer les dépendances du player
npm install axios@^0.18.0 bowser@^2.4.0 hls.js@^0.12.4 loadcss@0.0.2 loadjs@^3.6.1 lottie-web@5.5.9 moment@2.24.0 react-redux@^5.1.1 react-resize-observer@^1.1.1 redux@^4.0.1 svgxuse@^1.2.6 underscore@^1.9.1 --save
2- Définir un élément HTML où le lecteur sera situé.
Exemple d'élément:
Contient le lecteur, celui-ci sera en largeur 100% de l'élément parent. La taille du lecteur devrait être gérée à ce niveau.
3- Définition des paramètres d'intégrations
Le lecteur supporte plusieurs paramètres d'intégration pour modifier son comportement. Vous trouverez tous les paramètres et leur fonction ici.
Par la suite on créer un objet JavaScript contenant les paramètres voulus, qui seront ensuite utilisés à l'initialisation du lecteur.
4- Initialisation du lecteur
Script JS
L'objet "RadioCanadaPlayer" contient la méthode "initPlayerJS".
Package NPM
Importer la méthode "initPlayerJS"
La méthode "initPlayerJS" crée une instance du lecteur et accepte 3 arguments.
video-element-container-id: L’ID de l'élément créé à l'étape 2
idMedia: Le id du média désiré. (Le média peut-être changé par l'API utilisateur)
appCode: Le appCode du média précisé à l'étape précédente.
Les paramètres déclarés à l'étape 3
Script JS
Package NPM
Dans ce cas, l'instance du lecteur initialisé sera accessible par la variable "player" il sera donc possible d'utiliser l'API du lecteur en passant par cette variable.
Paramètres d'intégration
Nom du paramètre | Valeurs posible | Valeur par default | Environement disponible | Description |
---|---|---|---|---|
accessToken | string | null | DEV | PROD | Token d'identification de l'utilisateur pour permettre la lecture des médias premium. |
activateComscoreV2 | true | false | false | DEV | PROD | Active la métrie comscore v2. |
adUrl | string <url> | null | DEV | Force une URL où récupérer un VAST de publicité. |
audioApi | true | false | null | DEV | PROD | Mets le lecteur en mode audio API. Ce qui "render" seulement un tag audio sans aucun visuel. |
autoplay | true | false | false | DEV | PROD | Permets la lecture automatique du média |
brandColor | string ex: "#00A5AD" | null | DEV | PROD | Permets d'assigner la couleur de marque au différents éléments du lecteur. |
canReduce | true | false | false | DEV | PROD | Affiche le bouton reduce, qui permet de mettre le lecteur en mode réduit. |
clientId | string ex: "radiocanadaca_unit" | null | DEV | PROD | Permet de récupérer les paramètres selon le clientId dans bambou. |
disableInfoPanel | true | false | false | DEV | PROD | Cache le panneau d'information comprenant le titre, le nom de l'émission, le bouton retour et le bouton X. |
disableInfoPanelButton | true | false | true | DEV | PROD | Cache la flèche en haut à gauche indiquant à l'intégration que l'utilisateur souhaite quitter le player |
disableTracking | true | false | false | DEV | PROD | Désactive la metrie pour le lecteur audio/vidéo. |
reduceOnInit | true | false | false | DEV | PROD | Initialise le player en mode reduit. |
removeUnreduce | true | false | false | DEV | PROD | Retire le bouton unreduce du lecteur lorsqu'elle est en mode reduce. |
dai | true | false | false | DEV | PROD | Active les publicités DAI si disponibles. |
disableShortcuts | true | false | false | DEV | PROD | Permets de désactiver les raccourcis claviers pour une instance du lecteur. |
disableTimeControl | true | false | null | DEV | PROD | Contrôle l'affichage de l'heure dans la barre de contrôles pour les diffusions en direct. |
servicesEnv | string ex:"dev" | null | DEV | PROD | Permets de spécifier un environement pour metaMedia et validationMedia à des fins de tests seulement. Il bypass les paramètres spécifiés dans le build du player. |
heartbeat | true | false | false | DEV | Active la métrie Adobe HeartBeat |
heartbeatDebug | true | false | false | DEV | Permet de mettre heartbeat en mode debug. Ce qui affiche plusieurs messages dans la console. |
mediaAnalyticsEnable | true | false | false | DEV | Active la métrie de média analytics. |
noAds | true | false | false | DEV | Désactive les publicités sur cette instance du lecteur. |
pageShare | string | null | DEV | PROD | URL vers la page web référente du partage. Si non défini, le bouton de partage ne s'affichera pas. Par exemple, http://ici.radio-canada.ca aura comme pageShare: Liste des paramètres:
|
providerId | string <azure | hls | html> | html | DEV | PROD | Si présent, force le type de provider qui sera utilisé pour la lecture du média. |
width | string | null | DEV | PROD | Force la largeur du lecteur. |
exitFullscreenOnEnd | true | false | true | DEV | PROD | Permet de choisir le comportement de player à la fin de lecture en mode fullscreen. Si le paramètre est à false, le player reste en mode fullscreen, auterment le player revient en mode embed. |
useExternalFont | true | false | false | DEV | PROD | Permet redéfinir le font de player par défault. |
canCast | true | false | true | DEV | PROD | Active ChromeCast a true, le désactive a false. |
isModeResume | true | false | false | DEV | PROD | Permet d'utiliser le mode résume. |
time | int | 0 | DEV | PROD | Commence la lecture à une possition time (en seconde) |
multiInstance | true | false | false | DEV | PROD | Si true, les multiples players sur la page peuvent jouer en même temps |
meta | object | null | DEV | PROD | Permet de définir certaines valeurs des métadonnées. Liste des valeurs permises:
Exemple
|
format9x16 | true | false | false | DEV | PROD | Afficher le player en mode 9x16 et permettre une meilleure lecture des vidéos verticales |
hideUI | true | false | false | DEV | PROD | Masquer l’interface utilisateur du player, à l’exception du bouton play pour démarrer une vidéo |
loop | true | false | false | DEV | PROD | Lire le média en boucle |
Explications des paramètres généraux
idClient : Marque radio-canadienne de votre projet : la version logicielle du lecteur peut changer d’un idClient à un autre. Si votre projet ne fait référence à aucune marque radio-canadienne (projet externe, contenu annonceur), vous n'avez pas à en tenir compte.
appCode : Code de l’application d’où provient le média qui sera lu par le lecteur. ( Exemple : medianet, medianetlive )
Important : Ne jamais utiliser le appcode live, toujours utiliser le appcode medianetlive pour les lives.
idMedia : Identifiant unique du média qui sera lu par le lecteur.
params : Paramètres avancés permettant de personnaliser le comportement du lecteur. Une section complète est disponible plus loin dans le document pour expliquer en détail ces paramètres.
User API
Le user API du lecteur est disponible en utilisant la variable avec laquelle le lecteur à été instancié:
On peut ensuite utilise l'API de cette façon:
Les méthodes disponibles sont les suivantes:
Method | Params | Description |
---|---|---|
translocate(<location>, <allowDuringAd = false>) | location (required) <string>: ID de l'élément du DOM vers lequel le lecteur sera déplacé. allowDuringAd (optinal) <boolean>: Permettre le déplacement durant les publicités. | Déplace le lecteur vers un autre conteneur. Il est important d'utiliser cette méthode puisqu’on doit réinitialiser certaines librairies. |
play() | NA | Démarre la lecture du média. |
pause() | NA | Pause la lecture du média. |
setReduceMode(<reduced>) | reduced (required) <boolean>: État "reduced" du lecteur. | Informe le lecteur qu'il est en mode réduit ou non. |
dispose() | NA | Détruis l'instance actuelle du lecteur. |
changeMedia(<idMedia>, <appCode>, <params>) | idMedia (required) <string>: ID du média à charger appCode (required) <string>: appCode du média à charger params (optinal) <object>: nouveaux paramètres d'intégrations | Change le média en cours. |
getPlayerLog(<exportType>) | exportType <string>: Type de retour voulu. Options possibles: DATA, CONSOLE, FILE | Permets de récupérer les logs du lecteur. |
setAccessTokenApi(<accessToken>) | accessToken <string>: Jeton d'accès provenant de la page. | Permets d'aller récupérer les "claims" pour la lecture de contenus protégés. |
volume(<level>) | level <int>: Valeur de volume en pourcentage | Permets d'ajuster le volume sans utiliser le UI. |
mute() | NA | Mute le son du lecteur |
unMute() | NA | Unmute le son du lecteur. |
seekTo(<time>) | time <int>: Temps en seconde en rapport avec la durée du média. | Déplace la lecture au temps donné |
seekForward(<time>) | time <int>: Nombre de secondes à avancer. | Avance la lecture d'un certain nombre de secondes. |
seekBack(<time>) | time <int>: Nombre de secondes à reculer. | Recule la lecture d'un certain nombre de secondes. |
setCastMediaInfo(mediaInfo) | Array<chrome.cast.media.MediaInfo>: array de media | Set MediaInfo pour Cast avec enchaînement. |
fullscreen() | NA | Active ou désactive le mode plein écran. |
focusOnPlay() | removeA11yFocus(Optinal) <bool>: Flag pour conserver le focus a11y Default false | Met le focus sur le bouton play/pause dans le bas du lecteur |
Événements disponibles pour une instance du lecteur
Le lecteur est en mesure d'écouter ou d'émettre certains événements. Ceci est principalement utile lorsqu’on développe notre propre UI avec les lecteurs en mode API et aussi pour bien gérer la présence de plusieurs instances du player dans la même page.
Les événements du lecteur sont disponibles en utilisant la variable avec laquelle le lecteur a été instancié:
On peut ensuite avoir accès à la section d'événements du lecteur de cette façon:
Vous y trouverez 3 méthodes et l'objet suivants:
Nom | Params | Description |
---|---|---|
names | NA | Retourne la liste de noms des événements disponibles au lecteur. Voir la liste complète au bas de la page. |
emit(<eventName>) | eventName: Nom de l'événement disponible dans la variable "names" mentionné plus haut. | Permet de lancer un évément javascript. |
on(<eventName>, <callback>) | eventName: Nom de l'événement disponible dans la variable "names" mentionné plus haut. callback: Fonction gérant le retour de l'événement. Des paramètres sont disponibles selon les événements. | Ajoute une écoute d'événement JavaScript (addEventListner) |
off(<eventName>) | eventName: Nom de l'événement disponible dans la variable "names" mentionné plus haut. | Retire l'écoute d'événement JavaScript (removeEventListner) |
Événements disponibles
Nom | Description |
---|---|
AD_BREAK_COMPLETE | Fin d'une pause publicitaire (mid-roll). |
AD_BREAK_START | Début d'une pause publicitaire (mid-roll). |
AD_COMPLETE | Fin des publicités qui précède un média (pre-roll). |
AD_ERROR | Erreur durant les publicités. |
AD_PAUSE | La lecture des publicités est en pause. |
AD_STARTED | Début des publicités. |
ALL_ADS_COMPLETE | Toutes les publicités sont complétées pour le média actuel. |
BEGIN | Lancé dès que le média est demandé à jouer. |
BITRATE_CHANGED | Changement de résolution complété. |
CAST_REQUESTED | Indique que l'utilisateur demande de faire CAST |
CLOSING_CREDITS | Début du générique de fin de média. |
CONTENT_END | Fin du média en cours. |
DAI_COMPANIONS | Indique des des companions DAI sont disponibles sur la publicité DAI actuelle. Arguments:
companions
|
DISABLE_SHORTCUTS | Désactivation des raccourcis claviers. |
DISPOSE | Destruction de l'instance du lecteur. |
ENABLE_SHORTCUTS | Activation des raccourcis claviers. |
END | Média et postroll sont terminés. |
ENTER_FULL_SCREEN | Activation du mode plein écran. |
ERROR | Erreur survenue durant la lecture. |
EXIT_FULL_SCREEN | Sortie du mode plein écran. |
LOAD_START | Début du chargement du média. |
MEDIA_CHANGED | Changement de média terminé. |
META_CHANGED | Changement des metas data terminé. |
MUTE | Le volume du lecteur est passé en sourdine (muted) |
PAUSE | Le média est en pause. |
PLAY | Lecture du média. |
PLAYING | Le média est présentement en lecture. |
PLAYING_OUTSIDE | Une autre instance de lecture démarre la lecture d'un média. |
READY | Le lecteur est prêt à jouer le média |
REDUCE | Sélection du mode réduit. |
SEEK_END | Fin du "seek" media. |
SEEK_START | Début du "seek" média. |
START | Début de la lecture initiale d'un média. |
TIME_UPDATE | Temps courant du média. Arguments:
TimeState (État du temps du média)
|
|
|
UNMUTE | Le volume du lecteur est passé à normal (unmuted) |
VOLUME_CHANGE | Changement au volume de lecture. |
WAITING | Le lecteur est en attente de chargement. |
WARNING | Erreur non fatal. |
Voici la séquence des événements déclenchés dans le player durant la lecture:
META_CHANGED
BEGIN
PLAY
AD_BREAK_START
AD_STARTED
AD_COMPLETE
AD_BREAK_COMPLETE
START
PLAYING
ENABLE_SHORTCUTS
AD_BREAK_START
AD_STARTED
AD_COMPLETE
AD_STARTED
AD_COMPLETE
AD_STARTED
AD_COMPLETE
AD_BREAK_COMPLETE
PLAYING
CONTENT_END
AD_BREAK_START
AD_STARTED
AD_COMPLETE
AD_BREAK_COMPLETE
END
Considération pour le responsive
Afin que le player prenne automatiquement toute la largeur et hauteur disponible ( en fonction des dimensions du conteneur parent ), vous pouvez indiquer 100% pour les valeurs des paramètres avancées width et height.
Considération pour les appareils mobiles
Sur les appareils mobiles, le autoplay n’est pas supporté. De plus, la lecture de contenu doit toujours être initiée par une interaction usager. Ceci veut dire que si on utilise la fonction play(), celle-ci doit obligatoirement être appelée dans un gestionnaire d’événement initié par l’utilisateur (onClick ou autre). À notez qu’à cet effet, il est toujours mieux de privilégier click au lieu de touchstart, car ce dernier n’est pas considéré comme une interaction usager par Chrome.
Pour toutes questions ou commentaires
Veuillez contacter playerweb@radio-canada.ca