soporte Contactar con asistencia técnica | estado del sistema Estado del Sistema
Contenido de la página

    Video Sitemap Generator

    Este ejemplo muestra cómo puede generar un mapa de sitio de video usando el CMS API.

    Introducción

    Antes de usar esta aplicación, debes leer Hacer su contenido de video indexable para comprender mejor el propósito de los mapas de sitio en video y las estrategias para automatizar la generación de ellos usando el CMS API. Generar el XML para el mapa del sitio es bastante sencillo. El mayor desafío es que debe incluir una URL única para cada video, y la 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 video a los metadatos del video. La forma más sencilla de hacer esto sería crear un campo de metadatos personalizados para almacenar la URL en.
    2. Aloje los videos en una sola página, usando un parámetro de URL para especificar el video id or reference_id que JavaScript personalizado en la página usará para cargar el video en el player.

      Hay varias formas 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 utilizamos 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 tienes el id or reference_id, debes agregarlo a player. Cómo lo haga dependerá de si está utilizando el estándar (iframe) o avanzado (in-page) player código de inserción. Probablemente lo más simple y seguro de hacer es carga el player dinamicamente (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 usar para este propósito es el documento en la Única página sección a continuación.

    La aplicación de muestra a continuación le permite utilizar cualquiera de los dos métodos: solo tiene que indicarlo, ingresando la información en los campos correspondientes.

    Notas sobre la aplicación de muestra:

    1. La aplicación hace una solicitud a la Analytics API para obtener las vistas de video de todos los tiempos, por lo que si las credenciales de cliente que proporciona no incluyen permisos para el Analytics API, la aplicación fallará.
    2. El número máximo de videos que se pueden incluir es 50,000 y también hay un límite de 50mb para el tamaño del archivo, que puede alcanzar con menos videos que 50,000. Si tiene más videos que eso para incluir, tendrá que dividirlos en varios mapas de sitio y agregar un archivo de índice de mapa del sitio. Ver Documentación del sitemap de Google. .
    3. El mapa del sitio generado por la aplicación de muestra no incluye algunas de las etiquetas opcionales para los videos (consulte la documentación de Google mencionada 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 el código JavaScript y HTML para indicar lo que necesita hacer.
      Etiquetas opcionales incluidas o no
      Etiquetas incluidas Etiquetas no incluidas
      • player_loc
      • duración
      • fecha de caducidad (si corresponde)
      • conteo de visitas
      • fecha de publicación
      • amiga de la familia
      • (geo) restricción (si corresponde)
      • content_loc
      • clasificación
      • plataforma
      • precio
      • requiere_suscripción
      • cargador
      • live
      • etiqueta
      • categoría
      • galería_loc
    4. Los videos se omitirán si no cumplen con las condiciones necesarias, de la siguiente manera:
      • Si está almacenando la URL de la página de video en un campo personalizado, cualquier video que no tenga un valor para ese campo personalizado
      • Si está utilizando una sola página para alojar sus videos y está utilizando reference_id para incluirlos, y el video carece de una reference_id
      • El video no tiene imagen en miniatura.
      • El video no tiene reproducción MP4.
      • El video esta inactivo
      • El video está programado para comenzar en una fecha futura
      • El video 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 mapa del sitio después de generarlo, hay varias herramientas gratuitas en la web para hacerlo, por ejemplo:

    Validador de Sitemap gratuito

    Obtener credenciales

    Para utilizar el CMS API necesitarás las credenciales adecuadas.

    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 API de Studio API (requiere permisos de administrador en su cuenta). Ver Administrar Credenciales de Autenticación API para detalles. En la mayoría de los casos, es probable que solo quiera obtener permisos para todos CMS API operación:

    CMS API Permissions
    CMS API Permissions

    Si los permisos que necesita no están disponibles en Studio, o si prefiere obtenerlos directamente de OAuth API, usa tu elección del Obtenga Credenciales de Cliente documentos enumerados a continuación. Cualquiera que sea la opción que elija, deberá solicitar los permisos de operación correctos. Se puede usar lo siguiente con cURL, Postman o nuestra aplicación en línea para obtener todos los permisos para el CMS API:

                  "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 ejemplo

    Código fuente

    Encuentre todo el código asociado con esta muestra en este Repositorio GitHub.

    Aplicación de ejemplo

    Vea la pluma CMS API Ejemplo: Video Sitemap Generator por Brightcove Learning Services (@rcrooks1969) Sobre CodePen.

    Usando el CodePen

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

    • Alterne la visualización real del jugador haciendo clic en Resultado .
    • Haga clic en el HTML / CSS / JS botones para visualizar UNO de los tipos de código.
    • Haz clic en Editar en CodePen en la esquina superior derecha para bifurcar este CodePen en su propia cuenta.
    • Encuentre todo el código asociado con esta muestra en este Repositorio GitHub.

    Única 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 mediante el uso de un parámetro de consulta que define la identificación del video que la página debe usar. Por ejemplo, la aplicación generará JSON que contiene direcciones URL de ubicación similares a las siguientes para la ubicación de las páginas de video:

                <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 solo la identificación del video está cambiando.

    La página HTML real lee el videoId El parámetro URL genera dinámicamente un player utilizando la ID de video obtenida de la URL. La página HTML completa 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 una explicación completa del código, vea el Brightcove Player Muestra: cargando el Player Dinamicamente documento.

    Código proxy

    Para crear su propia versión de la aplicación de muestra en esta página, debe crear y alojar su propio proxy. (Los proxies utilizados por Brightcove Learning Services solo aceptan solicitudes de dominios de Brightcove). Puede encontrar 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 Uso de las API REST.


    Página actualizada por última vez el 28 Sep 2020