Ir al contenido principal
Keep Watching
J
Escrito por Javiera Mella
Actualizado hace más de 2 años

Requiere módulo de Customer.

Keep watching es la funcionalidad que permite a los usuarios continuar viendo un contenido desde donde dejaron de verlo.

Con la nueva funcionalidad de keepwatching, es posible obtener la información de los contenidos y de los usuarios, permitiendo desarrollar vistas que indiquen el progreso del contenido:

Ejemplos de video:

Ejemplo de audio:

La integración con este servicio requiere de dos partes:

  1. Integración con player Mediastream.

    1. La utilización de este servicio, posee como requerimiento principal la utilización de los players Mediastream, ya que esto permitirá registrar las métricas de consumo de los usuarios.

    2. La funcionalidad esta disponible para cualquier tipo de contenido, audio ondemand (AOD) o video ondemand (VOD)

    3. Para que el player indique el usuario que esta consumiendo, se debe traspasar la variable "customer",

      Integración Video:

    4. <!doctype html> 
      <html>
      <body>
      <script src="https://platform-static.cdn.mdstrm.com/js/player_api.js"></script>
      <div id="mdstrm-player"></div>
      <script>
      var playerOptions = {
      width: 640,
      height: 360,
      type: "media",
      id: "53453a861536b4526c9bd16e",
      customer: <Customer ID>
      autoplay: false,
      events: {
      }
      };
      var player = new MediastreamPlayer("mdstrm-player", playerOptions);
      player.videoPlay();
      </script>
      </body>
      </html>

      Integración Audio:

    5. <!doctype html> 
      <html>
      <head>
      <script src="https://player.cdn.mdstrm.com/lightning_player/api.js"></script>
      </head>
      <body>
      <div id="player-div">
      </div>
      <script>
      loadMSPlayer('player-div',
      {
      type: 'media',
      id: '5f7f563e34cd7e08221af329',
      customer: '<Customer ID>',
      volume: 0,
      appName: 'appName' }).then(player => {
      /** * Here you can use player api */
      console.log('** player loaded', player) }).catch(console.error)
      </script>
      </body>
      </html>
    6. El valor de <Customer ID>, puede ser tanto, un registro de usuario platform como un id externo, mientras sea enviado como un STRING, puede ser un correo o cualquier código que identifique únicamente al usuario que esta consumiendo. Con esta integración todos los consumos que el usuario realice en este player con su configuración, llegaran en nombre del usuario, y el player los asociara con el contenido consumido.

  2. Integración sitio

    Se debe considerar que la integración se realiza utilizando un 
    token de api, este token es propio de la cuenta y no se debe dejar
    publico, ya que puede permitir el acceso al resto de la
    información de la cuenta. Por esto, la recomendación es realizar
    las llamadas de api siempre desde el lado del servidor.

    1. La segunda parte de la integración corresponde a unir la información registrada del usuario con el sitio donde esta consumiendo, para que el usuario vea efectivamente el estado de sus contenidos.

    1. Para esto se disponibiliza la api de "keep-watching" para solicitar esta información. La consulta a esta api se realiza igual que el resto de las api de platform:

      1. Enviar la autentificación mediante el header X-API-Token, enviando el token de api, con privilegios de lectura y acceso al módulo de medias.

      2. Respuesta:

        {
        "status": "OK",
        "data": [{
        "account": "<ACCOUNT ID>",
        "customer": "<CUSTOMER ID>",
        "media": "<MEDIA ID>",
        "date": "<PLAYBACK DATE>",//Fecha de la ultima reproducción sobre ese contenido por ese usuario
        "progress": <% progress>, //porcentaje de consumo del usuario en base a la duración.
        "time": <POSITION TIME> //segundo sobre el contenido en el que quedo el usuario en su ultimo consumo
        }]
        }
    2. Las funcionalidades comúnmente implementadas corresponden a:

      1. Listado de los continuar viendo: Carrusel que permite mostrar un resumen de los medias que quedaron pendientes por el usuario

        • Esto se puede implementar consultando al endpoint de la siguiente forma:

          Ejemplo de respuesta:

          {
          "status": "OK",
          "data": [{
          "account": "<ACCOUNT ID>",
          "customer": "<CUSTOMER ID>",
          "media": <MEDIA OBJECT>,
          "date": "<PLAYBACK DATE>",
          "progress": <% progress>,
          "time": <POSITION TIME>
          },
          {
          "account": "<ACCOUNT ID>",
          "customer": "<CUSTOMER ID>",
          "media": <MEDIA OBJECT>,
          "date": "<PLAYBACK DATE>",
          "progress": <% progress>,
          "time": <POSITION TIME>
          }]
          }
        • Al no pasarle otro parámetro que no sea el <Customer ID>, por defecto entregara el listado de medias por terminar de ver, que hayan quedado menor o igual a un 95%.

      2. Listado de medias de un show o sección: Listar más de un media y el estado de reproducción de cada uno para el usuario.

        • En este caso una seria un listado de medias específicos, se requiere saber si estado de reproducción para visualizarlos de forma masiva, por ejemplo el siguiente mockup:

          donde se desea listar 8 contenidos y mostrar inmediatamente cuales ya fueron visualizados y cuales no.

        • En este caso la consulta se realiza al siguiente endpoint (sin /list): GET https://api.platform.mediastre.am/keep-watching?customer=<Customer ID>&media[]=<Media ID 1>&media[]=<Media ID 2>

          Ejemplo de respuesta:

          {
          "status": "OK",
          "data": [{
          "account": "<ACCOUNT ID>",
          "customer": "<CUSTOMER ID>",
          "media": "<MEDIA ID>",
          "date": "<PLAYBACK DATE>",
          "progress": <% progress>,
          "time": <POSITION TIME>
          },
          {
          "account": "<ACCOUNT ID>",
          "customer": "<CUSTOMER ID>",
          "media": "<MEDIA ID>",
          "date": "<PLAYBACK DATE>",
          "progress": <% progress>,
          "time": <POSITION TIME>
          }]
          }
        • En este caso se envían en la consulta un array de los medias que se desean consultar para el usuario y la API responderá solo con aquellos que tengan consumo.

      3. Continuar viendo en el player: al momento de seleccionar un contenido que el player se posicione en la linea de tiempo donde quedo el usuario.

        • La consulta se debe realizar igual que en el ejemplo anterior, pero pasando solo un media.

        • En este caso la consulta se realiza al mismo endpoint: GET https://api.platform.mediastre.am/keep-watching?customer=<Customer ID>&media[]=<Media ID>

          Ejemplo de respuesta:

          {
          "status": "OK",
          "data": [{
          "account": "<ACCOUNT ID>",
          "customer": "<CUSTOMER ID>",
          "media": "<MEDIA ID>",
          "date": "<PLAYBACK DATE>",
          "progress": <% progress>,
          "time": <POSITION TIME>
          }]
          }
        • Esto retornará la información de un solo contenido para el usuario consultado, con esta información y el valor de "time", se debe traspasar esta información al player, con el parámetro starttime que se admite en los playerOptions.

        • Puedes encontrar más información sobre las opciones del player, en el siguiente link: https://platform.mediastre.am/developer

          *Debes tener acceso a platform

Ejemplos:

Integración de player video y consumo:


{
"status": "OK",
"data": [
{
"account": "<ACCOUNT ID>",
"customer": "<CUSTOMER ID>",
"media": {
"_id": "<MEDIA ID>",
"duration": 6393,
"thumbnails": [<THUMNAIL DEFAULT>],
"title": "<MEDIA TITLE>",
"preview": {
"mp4": "<URL PREVIEW>"
}
},
"date": "2022-01-20T14:14:51.216Z",
"progress": 5,
"time": 318.85
}
]
}


Si tienes alguna pregunta relacionada por favor no dudes en escribirnos a través del chat.

Atte. El Equipo de Mediastream

¿Ha quedado contestada tu pregunta?