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

    Cuadrícula de miniaturas de video

    En esta muestra, aprenderá a usar el Playback API para recuperar un grupo de videos por ID, mostrarlos en una cuadrícula e iniciar videos en un player cuando el usuario hace clic en una miniatura, en otras palabras, crea un portal de video simple.

    Resumen

    En tanto la Brightcove Gallery ofrece un sistema robusto para construir portales de video, también puede construir un portal simple de bricolaje. Si no quieres cargar un player en su página web antes de que el usuario elija un video, puede mostrar una cuadrícula de miniaturas de video como se muestra en este ejemplo. Cuando se selecciona una miniatura, un Brightcove Player se carga en la página con el video seleccionado.

    Que necesitarás

    Todo lo que necesitará para construir este portal son:

    • A Video Cloud cuenta
    • Una clave de política habilitada para búsqueda para autenticar una solicitud a Playback API
    • Algunas habilidades de desarrollo web (HTML, CSS y JavaScript)

    Consideraciones de diseño

    Obtener datos de video

    Aunque tampoco CMS API o el Playback API se puede utilizar para obtener datos de video, el Playback API Es la elección obvia aquí por varias razones:

    • Debido a que los datos de respuesta se almacenan en caché (hasta 20 minutos), es mucho más rápido
    • Devuelve todos los datos que necesita para reproducir un video, mientras que el CMS API requiere dos solicitudes separadas para obtener los metadatos de video y las fuentes de video
    • Está habilitado para CORS, lo que significa que no necesita enrutar la solicitud de API a través de una aplicación proxy del lado del servidor

    Sin embargo, a pesar de la Playback API ofrece dos formas de obtener datos de video. Hay un método básico para obtener un video por id (o id de referencia), y podríamos iterar fácilmente sobre una matriz de identificadores para solicitar cada uno. Sin embargo, eso no es muy eficiente.

    Una mejor opción es utilizar el método de búsqueda de video, que nos permite encontrar todos los videos por id y devolverlos con una sola solicitud. El parámetro de búsqueda para la solicitud se verá así:

    q=id:6543217890%20id:1234567890%20id:987654321...

    El plan de %20 en esta cadena de búsqueda hay un espacio codificado por URI. Para obtener más información sobre la sintaxis de búsqueda, vea CMS /Playback API: Videos Buscar.

    El plan de player

    No hay requisitos especiales para el player - el valor por defecto Brightcove Player funcionaría bien

    Es posible que algunos usuarios no vean ningún video, por lo que no tiene sentido usar el ancho de banda para cargar un player hasta que se necesite Utilizaremos el Brightcove Player Cargador cargar un player dinámicamente la primera vez que se selecciona un video para su reproducción. Para maximizar el rendimiento, también precargaremos el Brightcove Player JavaScript, pero el player el cargador hará esto automáticamente si aún no está presente.

    Obtener una clave de política

    Las claves de política se generan automáticamente para todos Brightcove Players. Sin embargo, por razones de seguridad, las claves de política estándar no permiten buscar videos usando el Playback API. Para esta muestra, queremos una clave habilitada para búsqueda. Puedes crear uno usando el Policy API, pero la forma más fácil es usar el Aplicación de ejemplo de aprendizaje Brightcove y asegúrese de marcar la opción para obtener una clave habilitada para búsqueda.

    Aplicación de ejemplo

    Código para esta aplicación

    Puede encontrar el código de esta aplicación en este repositorio de GitHub.

    Codepen

    Vea la pluma Muestra de cuadrícula de video por Brightcove Learning Services (@rcrooks1969) en CodePen.

    Usando el CodePen

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

    • Alternar la visualización real de la player 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.

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