Creare un lettore di base utilizzando TVSDK

Completa i seguenti passaggi per creare un lettore di base utilizzando il browser TVSDK.

  1. Crea una nuova directory in cui puoi scaricare i file compressi per Browser TVSDK.

  2. Scarica Browser TVSDK da Zendesk, decomprimi i file e inserisci la cartella dei framework nella nuova directory.

  3. Crea un semplice modello HTML per il codice con un div al suo interno.

  4. Posiziona questo modello in un file HTML nella directory creata al punto 1.

    <!DOCTYPE html>

<html lang="en">
<head>
</head>
<body>
      <div id="videoDiv" width="200" height="200">
     <div id="video-controls"></div>
      </div>
</body>
</html>

  5. Aggiungi le librerie TVSDK per browser nella sezione head.

    <script src= "frameworks/player/dash.min.js"></script>
<script src= "frameworks/player/primetimemain.min.js"></script>
<script src= "frameworks/player/swfobject.js"></script>
<script src= "frameworks/player/primetimeei.min.js"></script>

  6. Per il tag body, aggiungi la sezione onLoad .

    <body onload="startVideo()">

  7. Inizia a implementare la funzione startVideo .

  8. Aggiungi un tag script e crea la funzione startVideo nel tag .

    Questo dovrebbe essere nella sezione iniziale della pagina.

    <script>
 function startVideo(){
 }
</script>

  9. Crea il Adobe.MediaPlayer.

    var player = new AdobePSDK.MediaPlayer();

  10. Crea il MediaPlayerView.

    SUGGERIMENTO

    In questo punto viene utilizzato il div creato in precedenza.

    var view = new AdobePSDK.MediaPlayerView(
document.getElementById("videoDiv"));
player.view = view;

  11. Aggiungi il listener di eventi del lettore.

    player.addEventListener(AdobePSDK.PSDKEventType.STATUS_CHANGED, onStatusChange);

  12. Implementa il gestore eventi e inseriscilo prima del listener di eventi add.

    var onStatusChange = function (event) {
 console.log(event.status);

 switch (event.status) {
  case AdobePSDK.MediaPlayerStatus.IDLE:
   console.log("Player Status: IDLE");
   break;

  case AdobePSDK.MediaPlayerStatus.INITIALIZING:
   console.log("Player Status: INITIALIZING");
   break;

  case AdobePSDK.MediaPlayerStatus.INITIALIZED:
   console.log("Player Status: INITIALIZED");
   break;

  case AdobePSDK.MediaPlayerStatus.PREPARING:
   console.log("Player Status: PREPARING");
   break;

  case AdobePSDK.MediaPlayerStatus.PREPARED:
   console.log("Player Status: PREPARED");
   break;

  case AdobePSDK.MediaPlayerStatus.PLAYING:
   console.log("Player Status: PLAYING");
   //update UI play/pause to show pause icon
   break;

  case AdobePSDK.MediaPlayerStatus.PAUSED:
   console.log("Player Status: PAUSED");
   //update UI play/pause to show play icon &
   //display pause icon over video
   break;

  case AdobePSDK.MediaPlayerStatus.SEEKING:
   console.log("Player Status: SEEKING");
   break;

  case AdobePSDK.MediaPlayerStatus.COMPLETE:
   console.log("Player Status: COMPLETE");
   break;

  case AdobePSDK.MediaPlayerStatus.RELEASED:
   console.log("Player Status: RELEASED");
   break;

  case AdobePSDK.MediaPlayerStatus.RELEASED:
   console.log("Player Status: ERROR");
   break;
 }
};

  13. Crea il MediaResource, che passa il collegamento M3U8 (o mpd).

    var resourceUrl = "https://example.com/a/yourUrl.m3u8";
var resourceType = AdobePSDK.MediaResourceType.HLS;
var mediaResource = new AdobePSDK.MediaResource(resourceUrl, resourceType, null, false);

  14. Crea una configurazione vuota e sostituisci la risorsa .

    var config = new AdobePSDK.MediaPlayerItemConfig();

player.replaceCurrentResource(mediaResource, config);

  15. Quando il lettore è nello stato INITIALIZZATO, chiama prepareToPlay.

    case INITIALIZED:
 player.prepareToPlay(); // <- add this line
 break;

  16. Una volta che il lettore è nello stato PREPARATO, chiama play.

    case PREPARED:
 player.play();
 break;

In questa pagina