Ejemplo de barra lateral de vídeos más vistos

Esta aplicación de ejemplo utiliza Media API para solicitar una lista de los cinco vídeos más vistos durante la última semana, y los muestra en una barra lateral HTML. Al hacer clic sobre los vídeos, se inicia un reproductor en una ventana nueva.

Haga clic aquí para ver esta versión de demostración en acción.

Antes de empezar

Debería estar familiarizado con la estrategia de etiquetas de script dinámicas para realizar llamadas a Media API utilizando únicamente JavaScript.

La llamada

A continuación, podemos observar la estructura de la llamada que utilizaremos para recuperar una lista de los cinco vídeos más vistos de nuestra cuenta:

http://api.brightcove.com/services/library?command=find_all_videos
  &token=0Z2dtxTdJAxtbZ-d0U7Bhio2V1Rhr5Iafl5FFtDPY8E.
  &video_fields=id,name,thumbnailURL,playsTrailingWeek
  &sort_by=plays_trailing_week&page_size=5

Parámetros importantes:

  • video_fields=id,name,thumbnailURL,playsTrailingWeek. Aquí especificamos qué campos queremos que se devuelvan por cada vídeo. En este caso, únicamente necesitamos name e id (para poder iniciar este vídeo en un reproductor), thumbnailURL (para poder mostrar la imagen en miniatura), y playsTrailingWeek, que almacena el número de reproducciones del vídeo durante los últimos 7 días.
  • sort_by=plays_trailing_week. Solicitamos que los vídeos devueltos se ordenen en función del número de veces que se han reproducido durante los últimos 7 días, utilizando el orden de plays_trailing_week. De forma predeterminada, se ordena de forma descendente.
  • page_size=5. Si lo preferimos, podemos especificar que los vídeos se agrupen en páginas, hasta un máximo de 100 por página. En este caso, definimos que se devuelvan 5 vídeos por página.

Configurar la etiqueta de script dinámica

La estrategia de etiquetas de script dinámicas utiliza una etiqueta de script insertada de forma dinámica, cuyo atributo src está establecido en la dirección URL de la llamada de servicio a Media API. Se incluye un parámetro callback, que hace referencia a una función personalizada a la que se llama cuando se devuelve la solicitud.

Para crear esta etiqueta, escribimos una función que cree la etiqueta de script con los atributos adecuados y la incluya en la página como sucesor del elemento head:

function addScriptTag(id, url, callback) {
	var scriptTag = document.createElement("script");
   
   // Añadir atributos del objeto script
   scriptTag.setAttribute("type", "text/javascript");
   scriptTag.setAttribute("charset", "utf-8");
   scriptTag.setAttribute("src", url + "&callback=" + callback);
   scriptTag.setAttribute("id", id);
	
	var head = document.getElementsByTagName("head").item(0);
	head.appendChild(scriptTag);
}
 
function getTopVideos() {
	addScriptTag("topVideos", 
    "http://api.brightcove.com/services/library?command=find_all_videos
    &token=0Z2dtxTdJAxtbZ-d0U7Bhio2V1Rhr5Iafl5FFtDPY8E.
    &video_fields=id,name,thumbnailURL,playsTrailingWeek
    &sort_by=plays_trailing_week&page_size=5", "response");
}

Configurar la función de devolución de llamada

La función de devolución de llamada pasa jsonData, que, como trabajamos con JavaScript, se analizará automáticamente en objetos nativos. Únicamente se debe repetir en la matriz de resultados y crear la estructura HTML que queramos utilizar para mostrar nuestra lista de vídeos. En este ejemplo, el atributo onClick permite que se pueda hacer clic en los elementos, y hemos aplicado CSS para renderizar la lista con un borde, además de un ancho apropiado para el elemento de barra lateral de la página.

function response(jsonData) {
	var resp = document.getElementById("resp");
	for (var i=0; i<jsonData["items"].length; i++) {
		var title = jsonData["items"][i];
		var str = "";
		str += '<div class="title" onClick="playTitle(' + title.id + ')">';
		str += '<div class="thumb"><img src="http://support.brightcove.com/%27%20%20%20title.thumbnailURL%20%20%20%27"/></div>';
		str += '<p class="displayName">' + title.name + '</p>';
		
		str += '<p class="views">viewed ' + title.playsTrailingWeek + ' times</p>';
		str += '</div>';
		resp.innerHTML += str;
	}
}

Habilitación de la reproducción al hacer clic

Para habilitar la reproducción, debe haber un vínculo a una página que disponga de un reproductor de Brightcove. En este ejemplo, hemos utilizado un reproductor de vídeo único que se iniciará en una ventana emergente. Al pasar videoID en la cadena de consulta como &bctid=[videoID], el reproductor de Brightcove lo detectará automáticamente y empezará la reproducción.

function playTitle(id) {
	  window.open("player.html?bctid=" + id,"Top_Videos_Sidebar",
      "location=0,status=0,scrollbars=0,width=500,height=445"); 
}

Nota: Para las plantillas de múltiples listas de reproducción, también debe pasar lineupID a fin de que el reproductor muestre el vídeo de forma adecuada. Si incrusta el vídeo en un núcleo de Flash, deberá escribir código auxiliar para obtener el videoID de la cadena de consulta y pasarlo al reproductor con la propiedad config["videoId"] property.

Más ejemplos

A continuación puede encontrar más ejemplos que le ayudarán a ponerse en marcha:

 

Publicar nuevo comentario

El contenido de este campo es confidencial y no se mostrará al público.
0

Comentarios