Meilleures pratiques

Précédent Suivant

Les "meilleures pratiques" suivantes permettent de garantir le succès lors de la mise en œuvre de ce SDK.

Lier votre code JS aux évènements TD SDK

Sur les appareils mobiles où l’auditeur peut être sur un réseau cellulaire et facturé par unité de données, le streaming audio HTML5 exige une action initiée par l’utilisateur (onmousedown, onmouseup,  onclick ou ontouchstart) pour démarrer la lecture. Aucune donnée n’est chargée tant que l’utilisateur ne l’a pas initiée.

De plus, aucun appel HTTP ne peut être effectué entre l’action de l’utilisateur et la lecture audio. Vous devez tenir compte de cette limitation. Dans le cas contraire, un message d'erreur sera affiché sur la console web.

Par exemple, si plusieurs requêtes XHR* synchrones (analytics, trackers, autres) sont envoyées entre un geste de l’utilisateur et la lecture instantanée du flux, cette erreur s’affichera dans la console Web :

"Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture" (Impossible d'exécuter la lecture sur 'HTMLMediaElement': l'API ne peut être initiée que par un geste d'utilisateur"

Comment éviter cette erreur

Associez des gestionnaires à des événements TD SDK. En associant des gestionnaires à des événements TD SDK, vous évitez que vos requêtes XHR spécifiques n’interfèrent avec l’exigence d'un geste de l’utilisateur sur mobile (iOS, Android).

Exemple :

/** Attach handlers to TD Player SDK events **/
 player.addEventListener( 'stream-start', onStreamStart );
 player.addEventListener( 'stream-fail', onStreamFail );
 player.addEventListener( 'stream-error', onStreamError );
  
 function onStreamStart( event )
 {
    //YOUR XHR REQUEST SENT HERE
 }
 
 function onStreamFail( event )
 {
    //YOUR XHR REQUEST SENT HERE
 }
 
 function onStreamError( event )
 {
    //YOUR XHR REQUEST SENT HERE
 }

*RequêteXMLHttp : https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest