Tutorial: Creación de un sitio de vídeo

Artículo
09/18/2014

Última modificación: lunes, 19 de abril de 2010

Hace referencia a: SharePoint Server 2010

En este artículo
Estructura del contenido
Formulario de presentación de vídeo personalizado
Elemento web Formulario de datos ocultos
Disponibilidad de columnas y el elemento web Formulario de datos ocultos

Para crear un sitio para uso compartido de medios sociales y experiencias asociadas como la carga de vídeos, la extracción de imágenes en miniatura, una página principal optimizada para la visualización de vídeos y la administración de contenido de vídeo, además de herramientas de agregación como canales para bibliotecas de vídeos de gran tamaño, en primer lugar debe crear un sitio de vídeo básico. En la creación de un sitio de vídeo básico se incluyen cinco pasos básicos:

Configuración de una estructura del contenido que admita el tipo de contenido de vídeo.
Creación de un formulario personalizado para mostrar los vídeos.
Creación de un DataFormWebPart oculto y su uso para obtener parámetros de elementos multimedia.
Creación del reproductor multimedia.
Uso del modelo de objetos de ECMAScript (JavaScript, JScript) para obtener acceso al objeto MediaWebPart.

Además, puede agregar características al sitio básico que admitan tareas comunes asociadas con el contenido de vídeo, incluida la clasificación de los vídeos, los comentarios, la exploración de vídeos relacionados, la visualización de las propiedades de elementos multimedia asociadas con el vídeo actual, etc.

Requisitos previos

Se requiere Microsoft Visual Studio 2010 y experiencia con las siguientes tecnologías relacionadas con SharePoint para completar el tutorial:

Microsoft SharePoint Designer 2010
HTML básico
Programación de JavaScript básica
Desarrollo de Microsoft Silverlight
XML y XSL básicos

Estructura del contenido

Para prepararse para crear el sitio de vídeo, en primer lugar use SharePoint Designer 2010 o la interfaz de usuario del explorador de Microsoft SharePoint Server 2010 para configurar una estructura del contenido. La estructura del contenido define qué características estarán disponibles en el nivel del sitio y de la colección de sitios, los tipos de contenido que deben habilitarse y las columnas que deben agregarse para admitir el contenido de vídeo.

Aprovisione la colección de sitios mediante la plantilla de sitio de portal de publicación.

Importante
Al actualizar los tipos de contenido, use la Galería de tipos de contenido de sitio para realizar los cambios. Al realizar los cambios en la Galería de tipos de contenido de sitio se facilita la adición de bibliotecas posteriores con tipos de contenido coherentes. Evite actualizar los tipos de contenido en bibliotecas de contenido individuales.

Configure dos bibliotecas Tipo de activo: una biblioteca Vídeos y una biblioteca Miniaturas. Incluya el tipo de contenido de vídeo en la biblioteca Vídeos y quite todos los demás tipos de contenido. Incluya el tipo de contenido de imagen en la biblioteca Miniaturas y quite todos los demás tipos de contenido. En toda la serie de tutoriales, la biblioteca Vídeos almacena archivos de vídeo y la biblioteca Miniaturas almacena imágenes en miniatura cargadas en el sitio.

Importante
Agregue un vídeo a la biblioteca Vídeos para crear una etiqueta <img> en la que se pueda hacer clic al agregar el elemento web Formulario de datos más adelante y configurar las columnas y los filtros.

El sitio de vídeo básico permite la funcionalidad de vídeo estándar y también admite el establecimiento de propiedades de elementos multimedia relacionadas que sean compatibles con el tipo de contenido de vídeo. Puede agregar clasificaciones, palabras clave empresariales, marcadores, compatibilidad con páginas de canales y otras propiedades al tipo de contenido de vídeo. Desde la Galería de columnas de sitio, agregue las columnas enumeradas en la Tabla 1 al tipo de contenido de vídeo.

Tabla 1. Columnas de sitio para agregar a la Galería de columnas de sitio

Nombre de columna	Tipo de columna y configuración relevante
Marcadores	Varias líneas de texto. Tipo==("Texto sin formato"; Permitir longitud ilimitada de bibliotecas de documentos=="Sí")
Canal	Búsqueda (Obtener información de: biblioteca "Páginas", columna "Título", "Permitir varios valores"==No)

Tabla 2. Columnas del tipo de contenido de vídeo

Nombre de columna	Se usa para
Clasificación (0-5)	Para que los usuarios clasifiquen contenido del formulario de presentación
Palabras clave empresariales	Para los vídeos relacionados del formulario de presentación

Nombre de columna	Tipo de columna y configuración relevante	Se usa para
Marcadores. Este campo incluirá los datos necesarios para mostrar los marcadores en vídeos más largos.
Canal	Búsqueda (Origen: biblioteca "Páginas", columna "Título", "Permitir varios valores"==No)	Páginas de canales. Este campo se usa para indicar en qué canal debe aparecer un vídeo.

Formulario de presentación de vídeo personalizado

La primera parte del sitio para uso compartido de vídeos es una página personalizada usada para mostrar los vídeos. La mayoría de los elementos de la página, como Clasificaciones y Marcadores, son propiedades que se definen al crear columnas para el tipo de contenido de vídeo. El reproductor multimedia se agregará en un próximo paso. En la página se incluyen los siguientes elementos:

Reproductor multimedia
Clasificaciones
Marcadores
Vídeos relacionados
Propiedades de elementos multimedia
Texto del reproductor multimedia
Comentarios

Creación de un nuevo formulario de presentación en SharePoint Designer

Inicie SharePoint Designer 2010 y, a continuación, abra el sitio de SharePoint.
En el panel de navegación izquierdo, haga clic en Listas y bibliotecas y, a continuación, seleccione la biblioteca Vídeos.
En la sección Formularios, haga clic en Nuevo.
En el cuadro de diálogo Crear nuevo formulario de lista, especifique el tipo de formulario que desea crear y si se debe Establecer como formulario predeterminado para el tipo seleccionado:
- Tipo de formulario: formulario de mostrar elementos
- Establecer como formulario predeterminado para el tipo seleccionado=Sí
- Tipo de contenido: vídeo
En la sección Formularios, haga clic con el botón secundario en el formulario creado recientemente y, a continuación, seleccione Editar archivo en modo avanzado.

Ya existe un Formulario de mostrar elementos nuevo que puede personalizarse. Es el formulario predeterminado que aparecerá cuando un usuario hace clic en el comando Ver propiedades en un vídeo.

Elemento web Formulario de datos ocultos

Cree un DataFormWebPart oculto y úselo para obtener parámetros de elementos multimedia. JavaScript proporciona gran parte de la funcionalidad incluida en el Formulario de mostrar elementos, como el reproductor multimedia y los marcadores. El modelo de objetos de JavaScript usa valores de parámetros de entrada almacenados en las columnas del vídeo que se está visualizando. Para personalizar el Formulario de mostrar elementos, en primer lugar agregue un DataFormWebPart a la página. Una vez oculto, el elemento web Formulario de datos incluye todos los datos necesarios para permitir las funciones de JavaScript necesarias.

Tabla 3. Parámetros del elemento web Formulario de datos

Columna	Se usa para	Nombre XSL en el elemento web Formulario de datos	Nombre de delimitador sugerido
Título	Reproductor multimedia	@Title	TitleFieldValue
Dirección URL	Reproductor multimedia	@FileRef	UrlFieldValue
PreviewImageUrl	Reproductor multimedia	@AlternateThumbnailUrl	PreviewsImageUrlFieldValue
Marcadores	Marcadores	@Bookmarks	BookmarksFieldValue
Palabras clave empresariales	Vídeos relacionados	@TaxKeyword	KeywordsFieldValue

Para agregar el elemento web Formulario de datos y configurar las columnas y los filtros

Seleccione Formulario de mostrar elementos en la cinta de opciones Insertar y, a continuación, seleccione la biblioteca Vídeos en el menú desplegable.
Haga clic en Agregar o quitar columnas en la cinta de opciones contextual Herramientas de vista de datos/Opciones y agregue los campos enumerados en la Tabla 3 en el grupo Columnas mostradas.
Haga clic con el botón secundario en la etiqueta <img> que actualmente se muestra para la columna PreviewImageUrl y use el comando Dar formato al elemento como para cambiar el formato a Texto.
Haga clic con el botón secundario en el hipervínculo que se muestra para la columna Dirección URL y, a continuación, cambie el comando Dar formato al elemento como a Texto.
En la cinta de opciones contextual Opciones, haga clic en el botón Parámetros y, a continuación, agregue un Nuevo parámetro denominado Id. en la sección Parámetros de vista de datos con los parámetros siguientes:
1. Origen del parámetro: cadena de consulta
2. Variable de cadena de consulta: Id.
3. Valor predeterminado: 1
En la cinta de opciones contextual Opciones, haga clic en Filtro y, a continuación, agregue el criterio de filtro: <Field Name:ID>Equals[ID]

Los dos últimos pasos garantizan que el DataFormWebPart siempre muestre valores de metadatos para el elemento que el usuario visualiza actualmente.

Disponibilidad de columnas y el elemento web Formulario de datos ocultos

Los valores del objeto DataFormWebPart no son direccionables para JavaScript de forma predeterminada. Es necesario configurar cada valor que se muestra en el DataFormWebPart para que sea direccionable para JavaScript. La configuración de estos valores sigue un patrón general. Para llevar a cabo este paso, debe poder ver el HTML de cada página. Por lo tanto, cambie a la vista En dos paneles en SharePoint Designer 2010 antes de comenzar.

Tras hacer que los valores del DataFormWebPart sean direccionables para JavaScript, oculte el elemento web para que no aparezca en la página Formulario de mostrar elementos cuando esta se visualice. Una vez que las etiquetas delimitadoras se encuentren en su lugar con nombres conocidos para cada parámetro, podrá obtener acceso a cualquier valor con una sola línea de código de JavaScript.

Para que las columnas estén disponibles para su uso mediante ECMAScript

Inicie SharePoint Designer 2010 y, a continuación, cambie a la vista En dos paneles para ver el código HTML de cada página.
Visualice el Elemento web Formulario de datos.
En la vista Código, busque la instrucción <xsl:value-of> usada para generar el valor correcto.

Sugerencia

Por ejemplo, el código de campo de Título es <xsl:value-of select="@Title"/>.
Incluya la instrucción <xsl:value-of> con un elemento <a> y especifique un atributo name para el elemento <a> (el código siguiente contiene un valor de ejemplo): <a name="TitleFieldValue"> <xsl:value-of select="@Title" /></a>.

Sugerencia
Por ejemplo, el código de campo de Título es <xsl:value-of select="@Title"/>.

Para ocultar el elemento web Formulario de datos

Busque el elemento <WebPartPages:DataFormWebPart> en el HTML de la página Formulario de mostrar elementos.
Rodéelo con un elemento <div> con el atributo style="display:none;" .
Obtenga acceso a los valores del objeto DataFormWebPart mediante la siguiente línea de JavaScript:(document.getElementsByName(‘Title’))[0].innerText;

Nota

Use el Nombre de delimitador sugerido enumerado en la Tabla 3 en lugar de Título en el fragmento de código.

En resumen, en este tema se configuró SharePoint Server 2010 como un sitio de publicación con las clasificaciones habilitadas, se crearon dos bibliotecas Tipo de activo (para almacenar archivos de vídeo y archivos de imagen en miniatura), se especificó el tipo de contenido de vídeo y se definieron las propiedades de elementos multimedia disponibles para dicho tipo de contenido, se creó un Formulario de mostrar elementos para mostrar los parámetros de elementos multimedia y el reproductor multimedia, se agregó un objeto DataFormWebPart que usa valores de parámetros de entrada almacenados en las columnas del vídeo que se está visualizando, se proporcionó acceso por parte del modelo de objetos de JavaScript a los valores del objeto DataFormWebPart y se ocultó el objeto DataFormWebPart para que no aparezca visible para los usuarios que visualizan el Formulario de mostrar elementos, que sirve de visualización básica para el sitio de vídeo.

En el siguiente tutorial, obtendrá información sobre cómo agregar el objeto MediaWebPart al Formulario de mostrar elementos usado para mostrar vídeos, cómo mostrar propiedades de elementos multimedia en el formulario y cómo rellenar con datos otros parámetros de elementos multimedia del tipo de contenido de vídeo, como clasificaciones, vídeos relacionados y comentarios.