soporte Contactar con Soporte | Estadoestado del sistema del sistema
Contenido de la página

    Generador de mapa del sitio de vídeo

    Este ejemplo muestra cómo se puede generar un mapa del sitio de vídeo mediante la API de CMS.

    Introducción

    Antes de usar esta aplicación, debe leer Making Your Video Content Indexable para comprender mejor el propósito de los sitemaps de vídeo y las estrategias para automatizar su generación mediante la API de CMS. Generar el XML para el mapa del sitio es bastante sencillo. El mayor desafío es que necesita incluir una URL única para cada vídeo, y el CMS API no tiene acceso automático a esta información. Para superar esto, hay un par de cosas que puedes hacer:

    1. Agregue la URL donde se publica el vídeo a los metadatos del vídeo. La forma más sencilla de hacerlo sería crear un campo de metadatos personalizado para almacenar la URL en.
    2. Hospede los vídeos en una sola página, utilizando un parámetro URL para especificar el vídeo id o reference_id que el JavaScript personalizado de la página utilizará para cargar el vídeo en el reproductor.

      Hay varias maneras de obtener el valor de un parámetro de URL específico para la página. A continuación se muestra una función que usamos en algunas de nuestras aplicaciones de ejemplo:

                  /**
                   * gets value of a URL param on current page URL if exists
                   * @param {string} name the param you want the value of
                   * @return {string} result value of param if exists or null
                   */
                  function getURLparam(name) {
                      var regex,
                          results;
                      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
                      regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
                      results = regex.exec(location.search);
                      return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
                  }

      Una vez que tenga el id o reference_id , es necesario agregarlo al jugador. El modo de hacerlo dependerá de si está utilizando el código de inserción estándar (iframe) o avanzado (en página) del reproductor. Probablemente lo más simple y seguro es  cargar el reproductor dinámicamente (o no, si por alguna razón el parámetro URL con el id no está presente).

      Un ejemplo de una sola página de HTML que se puede utilizar para este propósito es el documento en la sección Página única a continuación.

    La aplicación de ejemplo a continuación le permite usar cualquiera de los métodos: solo tiene que decirle cuál ingresando información en los campos apropiados.

    Notas sobre la aplicación de ejemplo:

    1. La aplicación realiza una solicitud al Analytics API para obtener las vistas de vídeo de todos los tiempos, por lo que si las credenciales de cliente que proporciona no incluyen permisos para la API de Analytics, la aplicación fallará.
    2. El número máximo de vídeos que se pueden incluir es de 50.000 y también hay un límite de 50 MB para el tamaño del archivo, que puede golpear con menos de 50.000 vídeos. Si tienes más vídeos que eso para incluir, tendrás que dividirlos en varios sitemaps y agregar un archivo de índice de sitemap. Consulta la documentación del sitemap de Google para obtener más información.
    3. El sitemap generado por la aplicación de ejemplo no incluye algunas de las etiquetas opcionales para los vídeos (consulte el documento de Google al que se hace referencia anteriormente para obtener información sobre ellos). Si desea incluirlos, puede tomar el código de esta aplicación y crear una versión modificada. Hay comentarios en JavaScript y código HTML para indicar lo que tendría que hacer.
      Etiquetas opcionales incluidas o no
      Etiquetas incluidas Etiquetas no incluidas
      • player_loc
      • duration
      • fecha de expiración (si procede)
      • view_count
      • publicación_fecha_
      • family_friendly
      • Restricción (geográfico) (si procede)
      • content_loc
      • rating
      • plataforma
      • precio
      • requires_subscripcion
      • cargador
      • en directo
      • tag
      • categoría
      • galery_loc
    4. Los vídeos se omitirán si no cumplen las condiciones necesarias, de la siguiente manera:
      • Si está almacenando la URL de la página de vídeo en un campo personalizado, cualquier vídeo que no tenga un valor para ese campo personalizado
      • Si está utilizando una sola página para alojar sus vídeos, y utiliza reference_id para incluirlos, y el vídeo carece de una reference_id
      • El vídeo no tiene imagen en miniatura
      • El vídeo no tiene representación MP4
      • El vídeo está inactivo
      • El vídeo está programado para comenzar en una fecha futura
      • El vídeo estaba programado para finalizar antes de la fecha actual

      Tenga en cuenta que para cualquier video que se omita, registro un mensaje en la consola del navegador indicando el motivo y la identificación del video.

    Finalmente, si desea validar su sitemap después de generarlo, hay varias herramientas gratuitas en la web para hacerlo, por ejemplo:

    Validador gratuito del mapa del sitio

    Obtener credenciales

    Para utilizar el necesitará las credenciales adecuadas.CMS API

    La forma más fácil de obtener credenciales en la mayoría de los casos es a través de la sección Autenticación de API de administrador de Studio (requiere permisos de administrador en su cuenta). Consulte Administración de credenciales de autenticación de API para obtener más información. En la mayoría de los casos, probablemente solo desee obtener permisos para todas las CMS API operaciones:

    Permisos de API de CMS
    Permisos de API de CMS

    Si los permisos que necesita no están disponibles en Studio, o si prefiere obtenerlos directamente de la API de OAuth, utilice los documentos que elija Obtener credenciales de cliente que se enumeran a continuación. Cualquiera que sea la opción que elija, deberá solicitar los permisos de operación correctos. Lo siguiente se puede usar con cURL, Postman o nuestra aplicación en línea para obtener todos los permisos para la API de CMS:

                  "operations": [
                    "video-cloud/video/all",
                    "video-cloud/playlist/all",
                    "video-cloud/sharing-relationships/all",
                    "video-cloud/notifications/all"
                    "video-cloud/analytics/read"
                  ]

    Aplicación de muestra

    Código fuente

    Encuentra todo el código asociado a esta muestra en este repositorio de GitHub.

    Aplicación de muestra

    Consulte el CMS API ejemplo de pluma: Generador de mapas del sitio de vídeo por Brightcove Learning Services (@rcrooks1969 ) en CodePen.

    Uso del CodePen

    Aquí hay algunos consejos para usar eficazmente el CodePen anterior:

    • Alterna la visualización real del reproductor haciendo clic en el botón Resultado.
    • Haga clic en los botones HTML/CSS/JS para mostrar UNO de los tipos de código.
    • Haga clic en Editar en CodePen en la esquina superior derecha para bifurcar este CodePen en su propia cuenta.
    • Encuentra todo el código asociado a esta muestra en este repositorio de GitHub.

    Una sola página

    Como se mencionó anteriormente, puede crear una página HTML que se puede usar para la ubicación de cada video. La aplicación modificará la URL de la página utilizando un parámetro de consulta que define el ID de vídeo que debe usar la página. Por ejemplo, la aplicación generará JSON que contenga direcciones URL de ubicación similares a las siguientes para la ubicación de las páginas de vídeo:

                <loc>
                    <![CDATA[http://my.site.net/videos.html?videoId=5984663997001]]>
                </loc>
                ...
                <loc>
                    <![CDATA[http://my.site.net/videos.html?videoId=5982130568001]]>
                </loc>

    Tenga en cuenta que sólo está cambiando el ID de vídeo.

    La página HTML real lee el parámetro URL de VideoID y, a continuación, genera dinámicamente un reproductor utilizando el ID de vídeo obtenido de la URL. Toda la página HTML aparece de la siguiente manera:

                <!doctype html>
                <html>
                
                <head>
                  <meta charset="UTF-8">
                  <title>Load Player Dynamically from URL Param</title>
                  <!-- Page styles -->
                  <style>
                    .video-js {
                      width: 640px;
                      height: 360px;
                    }
                  </style>
                </head>
                
                <body>
                  <div id="placeHolder"></div>
                  <!-- custom script -->
                  <script type="text/JavaScript">
                    var myPlayer,
                      playerHTML,
                      playerData = {},
                      theURLParam = '',
                      // Set the account ID to your account
                      myAccountId = '1507807800001';
                
                     // Read URL param for video ID
                    theURLParam = geturlparam('videoId');
                
                    // Assign data for the player instantiation
                    playerData = {
                      'accountId': myAccountId,
                      'playerId': 'default',
                      'videoId': theURLParam
                    };
                
                    // Call function that builds player
                    addPlayer();
                
                    /**
                     * gets value of a url param on current page url if exists
                     * @param {string} name the param you want the value of
                     * @return {string} result value of param if exists or null
                     */
                    function geturlparam(name) {
                      var regex,
                        results;
                      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
                      regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
                      results = regex.exec(location.search);
                      return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
                    };
                
                    // Dynamically adds player to page
                    function addPlayer() {
                      // Dynamically build the player video element
                      playerHTML = '<video-js id=\"myPlayerID\" data-video-id=\"' + playerData.videoId + '\"  data-account=\"' + playerData.accountId + '\" data-player=\"' + playerData.playerId + '\" data-embed=\"default\" class=\"video-js\" controls></video-js>';
                      // Inject the player code into the DOM
                      document.getElementById('placeHolder').innerHTML = playerHTML;
                      // Add and execute the player script tag
                      var s = document.createElement('script');
                      s.src = "https://players.brightcove.net/" + playerData.accountId + "/" + playerData.playerId + "_default/index.min.js";
                      document.body.appendChild(s);
                      s.onload = callback;
                    }
                
                     // Initialize the player and start the video
                    function callback() {
                      myPlayer = bc('myPlayerID');
                      // Can also use the following to assign a player instance to the variable if you choose not to use IDs for elements directly
                      // myPlayer = bc(document.getElementById('myPlayerID'));
                      myPlayer.on('loadedmetadata', function () {
                        // Mute the audio track, if there is one, so video will autoplay on button click
                        myPlayer.muted(true);
                        myPlayer.play();
                      })
                    }
                  </script>
                </body>
                
                </html>

    Tendrás que poner tu número de cuenta. Para obtener una explicación completa del código, consulte el ejemplo del reproductor de Brightcove: Cargar el documento Player Dinámicamente .

    Código proxy

    Para crear su propia versión de la aplicación de ejemplo en esta página, debe crear y alojar su propio proxy. (Los servidores proxy utilizados por Brightcove Learning Services sólo aceptan solicitudes de dominios de Brightcove.) Un proxy de muestra, muy similar al que usamos, pero sin las comprobaciones que bloquean las solicitudes de dominios que no son de BrightCove, se puede encontrar en este repositorio de GitHub. También encontrará instrucciones básicas para usarlo allí, y una guía más elaborada para crear aplicaciones alrededor del proxy en Using the REST API.


    Última actualización de la página el 28-09-2020