Tutorial: personalización de la experiencia de carga de vídeos

Artículo
09/18/2014

Última modificación: lunes, 27 de septiembre de 2010

Hace referencia a: SharePoint Server 2010

En este artículo
Página de carga y elemento web multimedia
Control de Silverlight oculto
Página de prueba MediaTest.aspx
Etiqueta <object> y extractionControl
Botón Set Thumbnail
Campos PreviewImageURL, Ancho de marco y Alto de marco

Este tema corresponde a la tercera parte de una serie de cinco partes de tutoriales que indican cómo crear y personalizar un sitio de uso compartido de vídeos.

Ahora que ya ha creado un formulario de presentación que permite a los usuarios ver vídeos, estará preparado para personalizar la experiencia de carga de vídeos. En este tutorial se demuestra cómo implementar controles que se usan para extraer automáticamente una imagen en miniatura de los vídeos. Se trata de una implementación de carga más eficaz de la que se ofrece de forma predeterminada en Microsoft SharePoint Server 2010, que requiere que los usuarios proporcionen manualmente la dirección URL de la imagen en miniatura de un vídeo.

En este tutorial se abordan tres tareas:

La creación de una página Formulario de editar elementos y la adición de un objeto MediaWebPart a ella. El formulario personalizable es la página de carga y es el mismo formulario que los usuarios ven al hacer clic en Ver propiedades en un vídeo.
La adición de un control de Microsoft Silverlight oculto a la página. Cuando se agrega una aplicación de Microsoft Silverlight oculta, la imagen se convierte en una miniatura del objeto MediaWebPart en un formato de imagen correcto.
El uso de ECMAScript (JavaScript, JScript) para agregar un botón Set Thumbnail. Cuando un usuario hace clic en Set Thumbnail, el modelo de objetos de JavaScript del objeto MediaWebPart captura el marco adecuado, llama a la aplicación de Silverlight de la página para almacenar la imagen en miniatura en la biblioteca Thumbnails, establece la dirección URL de la imagen en miniatura automáticamente para el vídeo y oculta el campo PreviewImageUrl para que no pueda verse en el formulario.

Requisitos previos

Precaución
Para este tutorial es necesario poseer conocimientos acerca de Silverlight. En el Kit de desarrollo de software (SDK) de Microsoft SharePoint 2010 se incluye un ejemplo de código para una solución de Silverlight que lleva a cabo las funciones aquí descritas. El código de ejemplo alineado se incluye solo con fines ilustrativos, por lo que no debe usarse directamente en código de producción.

Complete el tema Tutorial: Creación de un sitio de vídeo.

Página de carga y elemento web multimedia

Como se describe en Tutorial: Creación de un sitio de vídeo, use Microsoft SharePoint Designer 2010 para crear un Formulario de editar elementos en la biblioteca Vídeos y agregarle el objeto MediaWebPart.

Para crear un formulario de edición mediante SharePoint Designer

Inicie Microsoft SharePoint Designer 2010 y, a continuación, navegue al sitio de SharePoint.
En el panel denavegación izquierdo, haga clic en Listas y bibliotecas y, a continuación, seleccione la biblioteca Vídeos.
Haga clic en Nuevo para abrir el cuadro de diálogo Crear nuevo formulario de lista.

En el cuadro de diálogo Crear nuevo formulario de lista, especifique la configuración tal y como se muestra en la tabla 1.

Tabla 1. Configuración del cuadro de diálogo Crear nuevo formulario de lista

Configuración	Valor
Tipo de formulario	Formulario de editar elementos
Establecer como formulario predeterminado para el tipo seleccionado	Sí
Tipo de contenido que se va a usar para el formulario	Vídeo

En la sección Formularios, haga clic con el botón secundario en el formulario recién creado y, a continuación, seleccione Editar archivo en modo avanzado.

Aparecerá un nuevo formulario de presentación que podrá personalizar. Se trata del formulario predeterminado que verán los usuarios al hacer clic en Ver propiedades en un vídeo. Los campos Title y PreviewImageURL probablemente estarán en blanco en los vídeos cargados recientemente.

Importante
En el tema Tutorial: Creación de un sitio de vídeo, vea la sección sobre el elemento web Formulario de datos ocultos para obtener más información acerca de cómo obtener la dirección URL del vídeo y cómo crear el objeto MediaWebPart relativo a la página de carga de vídeos. Repita los pasos descritos en el procedimiento sobre cómo agregar un elemento web multimedia para agregar un reproductor multimedia al formulario de edición.

En el tema Tutorial: Creación de un sitio de vídeo, vea la sección sobre el elemento web Formulario de datos ocultos para obtener más información acerca de cómo obtener la dirección URL del vídeo y cómo crear el objeto MediaWebPart relativo a la página de carga de vídeos. Repita los pasos descritos en el procedimiento sobre cómo agregar un elemento web multimedia para agregar un reproductor multimedia al formulario de edición.

Control de Silverlight oculto

El control personalizado de Silverlight administra la extracción y la carga de archivos de imagen en miniatura desde el marco actual del objeto MediaWebPart. En un nivel superior, el código expone un método JavaScript único que obtiene y establece los parámetros que se usan durante la conversión y la carga, y devuelve el nombre de archivo de cada imagen en miniatura cargada. El código agrega caracteres de relleno aleatorios en el nombre de archivo para mejorar las posibilidades de una extracción correcta de la imagen.

/* convertAndUploadThumbnail: Parameters:
         *  - sImageAsEncodedBitmap: The bitmap generated by the media player.
         *  - nWidth: The width of the thumbnail image.
         *  - nHeight: The height of the thumbnail image.
         *  - sFileNameToUse: The name of the file to use (without the file extension) 
         *  - sWebUrl: The URL of the Web to which the thumnbnail image should be uploaded.
         *  - sServerRelativeListUrl: The server-relative URL of the list where the thumbnail should be uploaded.
         *  Returns: 
         *  The file name of the uploaded thumbnail, constructed by adding a random character to
         *  sFileNameToUse and appending the file extension.
         *  (This is not the full URL; this is only the name of the leaf.)
         */

Sugerencia
Consulte el ejemplo de código completo del extractor de imagen en miniatura de Silverlight en la carpeta C:\Program Files\Microsoft SDKs\SharePoint 2010\Microsoft SDKs\SharePoint 2010\Samples del SDK de SharePoint 2010 descargado.

La lógica básica del control personalizado se encuentra en el archivo MainPage.xaml.cs. El código convierte la imagen en miniatura proporcionada por el objeto MediaWebPart al formato de archivo .jpg. Tras ello, usa el modelo de objetos cliente de SharePoint para cargar el archivo .jpg en la ubicación especificada.

El archivo de clave generado por el proyecto de Visual Studio 2010 es un archivo único, ExtractThumbnail.xap, que contiene el archivo ejecutable. Para implementar el archivo .xap, cárguelo en la Biblioteca de estilos del sitio.

Para cargar el archivo XAP en la biblioteca de estilos

Navegue al sitio de SharePoint y, a continuación, abra cualquier página.
Haga clic en Todo el contenido del sitio y, a continuación, en Biblioteca de estilos.
En la ficha Documentos, haga clic en Cargar documento para cargar el archivo .xap.
Publique el archivo .xap y apruébelo como una versión principal, de modo que todos los usuarios puedan obtener acceso a él.

Página de prueba MediaTest.aspx

El proyecto de Visual Studio 2010 incluye la página de prueba MediaTest.aspx, que se puede usar para probar la aplicación en sí en una página. Una vez cargado el archivo .xap generado por el proyecto (en la dirección URL especificada en la página MediaTest.aspx), cargue la página en cualquier biblioteca de documentos de SharePoint y, a continuación, búsquela.

Etiqueta <object> y extractionControl

Para que la aplicación de Silverlight esté disponible en la página de carga, use SharePoint Designer 2010 para agregar una etiqueta <object> que cargue la aplicación y la encapsule en una instrucción <div> con un identificador conocido, como extractionControl. Reemplace el valor de la dirección URL por el parámetro source con la dirección URL que apunte al archivo .xap cargado anteriormente.

<div id="extractionControl">
//The user sets the width and height. For debugging purposes, the control displays text stating whether
//the upload succeeded or failed. To suppress debugging messages, set the width and height to very small 
// values.
// <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="30px" id="ExtractControlSilverlight">
  <param name="source" value="http://<server>/Style%20Library/ExtractThumbnail.xap"/>
  <param name="onError" value="onSilverlightError" />
  <param name="background" value="white" />
  <param name="minRuntimeVersion" value="3.0.40624.0" />
  <param name="autoUpgrade" value="true" /> 
// Markup is emitted if the user does not have Silverlight installed. The HTML renders an image link 
// suggesting that they download Silverlight.
  <a href="https://go.microsoft.com/fwlink/?linkid=149156&clcid=0xC0A" style="text-decoration:none">
   <img src="https://go.microsoft.com/fwlink/?linkid=108181&clcid=0xC0A" alt="Get Microsoft Silverlight" style="border-style:none"/>
  </a>
    </object>
</div>

El modo de obtener acceso mediante programación al control de extracción de Silverlight es similar al modo de obtener acceso al objeto MediaWebPart, como se describe en Tutorial: Creación de un sitio de vídeo: la capacidad para poder obtener acceso a él se consigue desde la página de carga. Inserte una función de JavaScript en la página para obtener el control de extracción de Silverlight como un objeto JavaScript.

function getExtractorControl() 
{
var control = document.getElementById("extractionControl").childNodes[0];
return control.Content.MainPage;
}

Botón Set Thumbnail

Agregue el elemento de botón a la página agregando código de JavaScript, preferentemente cerca del código del reproductor multimedia: <input onclick="captureThumbnailAndSetMetadata();" type="button" value="Set Thumbnail"/>

El botón de JavaScript que hay tras este botón extrae parámetros para su uso por parte del control de Silverlight.

Tabla 2. Parámetros de botón de ECMAScript

Parámetro	Método de cálculo y extracción
Miniatura	Se extrae del objeto MediaWebPart mediante el método CaptureCurrentFrame de JavaScript.
Alto y ancho de la miniatura	El cálculo del alto y ancho correctos implica un proceso de dos pasos. El tamaño del objeto MediaWebPart no siempre es igual al tamaño de la imagen en miniatura que se devuelve, debido a que la relación de aspecto de su rectángulo puede ser diferente de la del vídeo. Para calcular el alto y ancho correctos, debe calcular en primer lugar la relación de aspecto natural del vídeo mostrado en el objeto MediaWebPart mediante la propiedad NaturalVideoWidth y las propiedades NaturalVideoHeight de la imagen en miniatura. A continuación, según cuál sea la relación de aspecto natural, calcule el tamaño de la imagen en miniatura obtenida. En función de la relación de aspecto, el tamaño será el ancho total del reproductor y una altura menor, o bien el alto total del reproductor y un ancho menor.
Nombre de archivo que se va a usar para la imagen en miniatura	Puede establecer este valor en cualquier cadena de texto. Por ejemplo, puede establecerlo en el valor Título usado en el objeto MediaWebPart, o bien puede establecerlo en una cadena aleatoria calculada por JavaScript.
Dirección URL del servidor	Este parámetro está codificado de forma rígida en el nombre del servidor actual (representado por <server> en los ejemplos de código).
Dirección URL relativa al servidor de la biblioteca de documentos para almacenar las miniaturas	Este parámetro está codificado de forma rígida en la dirección URL /Thumbnails que se basa en el nombre de la biblioteca de miniaturas especificada anteriormente.

Una vez que el control de Silverlight ha cargado el control de miniaturas, el código de JavaScript usa los datos establecidos en los valores de propiedad especificados en la tabla 3.

Tabla 3. Datos de valor de propiedad

Nombre del campo	Definición
Vista previa de la dirección URL de la imagen	Dirección URL basada en el nombre de archivo que el control de Silverlight devuelve.
Ancho de marco	Ancho del vídeo, tal y como se ha calculado anteriormente.
Alto de marco	Alto del vídeo, tal y como se ha calculado anteriormente.

Para rellenar los campos de la tabla 3 con los valores devueltos por el código, la función de JavaScript realiza una operación de bucle mediante programación a través de todos los campos de entrada incluidos en el formulario y rellena el valor correcto cuando encuentra el campo adecuado.

function captureThumbnailAndSetMetadata()
{
//Get the media player and extraction control.
var mediaPlayerObj = getMediaPlayer();
var slExtractorControl = getExtractorControl();

//Get the natural height and width of the video from the object model for the media player.
var nHeight = mediaPlayerObj.NaturalVideoHeight;
var nWidth = mediaPlayerObj.NaturalVideoWidth;

//Calculate the actual height and width of the thumbnail image based on the natural versus current aspect ratio.
var naturalAspectRatio = nWidth/nHeight;

var originalHeight = 225;  //This value must match the height of the media player on the page.
var originalWidth = 300; //This value must match the width of the media player on the page.
var originalAspectRatio = originalWidth/originalHeight;

var thumbnailWidth;
var thumbnailHeight;

if (originalAspectRatio > naturalAspectRatio)
{
thumbnailHeight = originalHeight;
thumbnailWidth = originalHeight * naturalAspectRatio;
}
else
{
thumbnailWidth = originalWidth;
thumbnailHeight = thumbnailWidth/naturalAspectRatio-1; 
}
//Finished computing the thumbnail height and width.

//Get the current frame from the media player.
var sThumbnail = mediaPlayerObj.CaptureCurrentFrame();

//Get the file name to start with from the media player.
var sFileName = (document.getElementsByName('mediaTitle'))[0].innerText;

//Calls the Extractor Control, which returns the file name of the actual thumbnail.
//Replace <server> with the name of your server and update folder parameters as needed.
var sThumbnailFileName = slExtractorControl.convertAndUploadThumbnail(sThumbnail, thumbnailWidth, thumbnailHeight, sFileName, "http://<server>/", "/Video Thumbnails");
//Begin setting the relevant metadata.
var sThumbnailUrl = "http://<server>/Video Thumbnails/"+sThumbnailFileName;

//Get the input fields in a single array to set the URL.
var sInputFields = document.getElementsByTagName('input');

//Loop through all the input fields and look for the fields we want to set.
var i;
for (i=0; i<(sInputFields.length);i++)
{
//Indicates that the preview image URL is found.
if (sInputFields[i].title == 'Preview Image URL')
{
sInputFields[i].value=sThumbnailUrl; 
}

//Indicates that the frame width is found.
if (sInputFields[i].title == 'Frame Width')
{
sInputFields[i].value=thumbnailWidth;
}

// Indicates that the frame height is found.
if (sInputFields[i].title == 'Frame Height')
{
sInputFields[i].value=thumbnailHeight;
}
} 
}

Campos PreviewImageURL, Ancho de marco y Alto de marco

Oculte los campos PreviewImageUrl, Ancho de marco y Alto de marco en la interfaz de usuario de modo que los usuarios no intenten escribir o cambiar los valores de forma manual. Para ocultarlos, use la Vista Diseño de Microsoft SharePoint Designer 2010 para buscar los elementos**<tr>** relevantes para cada una de las filas de la tabla que contienen esos campos y establezca su atributo style: style=display:none. Esta configuración impide que los campos se muestren al usuario, pero los deja en la página donde pueden establecerse mediante el modelo de objetos de ecmascriptshort.

Pasos siguientes

Tutorial: creación de una página principal personalizada y de XSL de elemento web de consulta de contenido

Vea también

Tareas

Procedimiento para configurar el objeto MediaWebPart mediante ECMAScript

Conceptos

Tutoriales: Creación y personalización de un sitio para uso compartido de vídeos

Modelo de programación de administración de activos digitales

Compartir a través de