Cuadrícula de miniaturas de video

Resumen

Tiempo Galería Brightcove ofrece un sistema robusto para construir portales de video, también puede construir un portal simple para que lo haga usted mismo. Si no desea cargar un reproductor 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 esta muestra. Cuando se selecciona una miniatura, se carga un Brightcove Player en la página con el video seleccionado.

Que necesitarás

Todo lo que necesita para construir este portal es:

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

Consideraciones de diseño

Obtener datos de video

Aunque el CMS API o la API de reproducción se puede utilizar para obtener datos de video, la API de reproducción es la opció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 del video y las fuentes del video
• Está habilitado para CORS, lo que significa que no necesita enrutar la solicitud de API a través de una aplicación de proxy del lado del servidor

Sin embargo, la API de reproducción ofrece dos formas de obtener datos de video. Existe 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 eficaz.

Una mejor opción es utilizar el método de búsqueda de videos, 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...

La %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, consulte CMS / API de reproducción: Búsqueda de vídeos.

El jugador

No hay requisitos especiales para el reproductor: el Brightcove Player predeterminado funcionaría bien.

Es posible que algunos usuarios no vean ningún video, por lo que no tiene sentido usar ancho de banda para cargar un reproductor hasta que sea necesario. Usaremos el Cargador de reproductores Brightcove para cargar un reproductor dinámicamente la primera vez que se selecciona un video para su reproducción. Para maximizar el rendimiento, también precargará Brightcove Player JavaScript, pero el cargador del reproductor lo hará 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 los Brightcove Players. Sin embargo, por razones de seguridad, las claves de política estándar no permiten la búsqueda de videos mediante la API de reproducción. Para esta muestra, queremos una clave habilitada para búsqueda. Puedes crear uno usando el API de política , pero la forma más fácil es usar el Aplicación de muestra de aprendizaje de Brightcove y asegúrese de marcar la opción para obtener una clave habilitada para búsqueda.

Aplicación de muestra

Código para esta aplicación

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

Codepen

ver la pluma Muestra de cuadrícula de video por los servicios de aprendizaje de Brightcove (@rcrooks1969 ) en CódigoPen.