Tutorial: Adición del elemento web multimedia y las características del 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
Reproductor multimedia
Inserción de texto
Marcadores
Propiedades de elementos multimedia y control de clasificación
Comentarios y el elemento web Panel de notas
Vídeos relacionados

Este tema corresponde a la segunda parte de una serie de cinco partes de tutoriales que le mostrarán cómo crear y personalizar un sitio para uso compartido de vídeos.

Requisitos previos

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

Reproductor multimedia

Cree una referencia en la página donde aparecerá el reproductor multimedia, agregue en la página una referencia al modelo de objetos del reproductor multimedia para crear dicho reproductor en la etiqueta <div> especificada y, a continuación, agregue código de ECMAScript (JavaScript, JScript) alineado en la página donde desea que aparezca el reproductor multimedia.

Para agregar un reproductor multimedia en la página Formulario de mostrar elementos

Inicie Microsoft SharePoint Designer 2010 y, a continuación, abra el Formulario de mostrar elementos creado en Tutorial: Creación de un sitio de vídeo en la vista En dos paneles.
Cree una referencia <div> en la página donde desea que aparezca el objeto MediaWebPart.

Sugerencia

Por ejemplo, para crear una etiqueta <div> con un ID de MediaPlayerHost, agregue <div id="MediaPlayerHost"></div> en la página.
Agregue una referencia al modelo de objetos de JavaScriptmediaplayer.js en la página para importar las funciones para trabajar con el reproductor multimedia. Por ejemplo, <script type="text/javascript" src="/_layouts/mediaplayer.js"/>.

Sugerencia
Por ejemplo, para crear una etiqueta <div> con un ID de MediaPlayerHost, agregue <div id="MediaPlayerHost"></div> en la página.

Agregue código de JavaScript alineado en la página donde desea que aparezca el objeto MediaWebPart.

//Get relevant parameters from the Data Form Web Part. 
var mediaTitleValue = (document.getElementsByName('TitleFieldValue'))[0].innerText;
var mediaUrlValue = (document.getElementsByName('UrlFieldValue'))[0].innerText;
var previewImageUrlValue = (document.getElementsByName('PreviewImageUrlFieldValue'))[0].innerText; 

//Create the media player.
mediaPlayer.createMediaPlayer(
document.getElementById('MediaPlayerHost'), //The <div> tag into which to insert the Silverlight object.
'MediaPlayerHost', // The ID attribute to assign to the "Object" element that will be inserted on the page and used to access the media player later.
'600px', // The width of the media player.
'450px', // The height of the media player.
    { // Parameters passed to the media player.
             displayMode:'Inline', //Display mode for the media player. For this scenario, we want "inline".
             mediaTitle:mediaTitleValue, //Title to set for the media player. Note reference to the mediaTitleValue variable created above.
             mediaSource:mediaUrlValue, //URL of the video. Note reference to the mediaUrlValue variable created above.
             previewImageSource:previewImageUrlValue, //URL for the preview image. Note reference to the previewImageUrlValue variable created above.
             autoPlay:true, //Whether the media player should start playing as soon as it is created.
             loop:false,  //Whether the video should "loop" when it reaches the end.
             mediaFileExtensions:'wmv;wma;avi;mpg;mp3;', //File extensions that the media player supports. Set these as they are shown here. 
             silverlightMediaExtensions:'wmv;wma;mp3;' //Set these as shown here. 
    },
    '', //Set to ''.
    false,  //Set to "false".
    '' //The function to call when the player is finished loading. '' means "do not call any function". 
    );

Inserción de texto

Ahora que ya se ha creado el objeto de reproductor multimedia, puede obtener acceso a él mediante el modelo de objetos de JavaScript. Para ello, obtenga el valor de la propiedad EmbedText, que puede usarse para insertar el objeto de reproductor multimedia en una página o documento de destino. Existen varias maneras de mostrar el reproductor multimedia en la página; un cuadro de texto Input es una de las opciones.

Los llamadores del método createMediaPlayer pueden pasarle un puntero a función al que llamará una vez creado el reproductor multimedia. Esto resulta útil si desea que el código que se ejecuta en la página use el reproductor multimedia. Mediante este método, puede confiar en que el reproductor multimedia estará totalmente cargado antes de que se llame al código.

Obtenga el reproductor multimedia como un objeto de JavaScript mediante una función basada en el parámetro MediaPlayerHost ID especificado al crear el reproductor multimedia.
```
Function getMediaPlayer()
   {
   var p=document.getElementById("MediaPlayerHost")
   var obj=p.getElementsByTagName("object");
   return obj[0].Content.MediaPlayer;
   }
```
Establezca la propiedad EmbedText en la página y llámela automáticamente cuando se cree el objeto de reproductor multimedia.
```
function getEmbedText(example)
{
     var player = getMediaPlayer();
     return player.EmbedText;
}
```
Llame a createMediaPlayer para incluir un nombre de función que se llamará cuando el reproductor multimedia se cargue. Configure la función de modo que use la función getEmbedText para mostrar el texto insertado en la página.

Marcadores

Para vídeos con tiempos de ejecución más extensos, gran cantidad de secciones discretas, metadatos o una alta complejidad, resulta útil incluir marcadores. Al hacer clic en un marcador, el reproductor multimedia salta a un tiempo definido del vídeo en la página, lo que es similar a moverse entre capítulos de un DVD. Puede usar el campo Bookmarks (ya incluido en la implementación del objeto DataFormWebPart descrita en el tema Tutorial: Creación de un sitio de vídeo) para agregar marcadores en la página. En lo que respecta a este tutorial, use un campo Bookmarks con valores de datos en el siguiente formato.

Nota

Tenga en cuenta las llaves.

Nota

El código siguiente es texto en un campo de texto múltiple, no de JavaScript.

{Bookmark1Time},{Bookmark1Title};
{Bookmark2Time},{Bookmark2Title};

Por ejemplo, si desea establecer los tiempos del marcador en 10 segundos y 20 segundos respectivamente.

0:10,This bookmark will seek to ten seconds in the video;
0:20, This bookmark will seek to 20 seconds in the video.

Una vez definida la función a la que se llamará al hacer clic en un vínculo del marcador, agregue código de JavaScript que se ejecute en la página para extraer el valor del campo Bookmarks y úselo para representar vínculos que llamen a la función de JavaScript.

Para agregar marcadores en el Formulario de mostrar elementos

Abra la página en SharePoint Designer 2010.
Agregue en la página una etiqueta <ul> con un atributo id establecido en bookmarkList, en la ubicación donde desea que aparezca el marcador: <ul id="bookmarkList">.

Agregue en la página una función de JavaScript que busque el reproductor multimedia en posiciones especificadas.

Sugerencia
Use esta función más adelante para vínculos de marcadores individuales.

function seekPlayer(posInSeconds)
{
var p = getMediaPlayer(); 
// The PositionMilliseconds parameter is a media player ECMAScript function found in mediaplayer.js.
   p.PositionMilliseconds = posInSeconds * 1000;
}

Agregue en la página código de JavaScript que represente el texto de vínculo de los marcadores.

//Get the bookmarks from the BookmarksFieldValue anchor tag. 
var bookmarks = (document.getElementsByName('BookmarksFieldValue'))[0].innerText;

//Strip out any <br> tags.
bookmarks = bookmarks.replace(/<br>/gi,"");

//While loop: Loops through bookmarks and processes as long as there are more bookmarks. 
//Temporary variables for the next position and title.
var nextPositionSeconds;
var nextTitle;
var bookmarksList = document.getElementById('bookmarksList');

//As long as there are more semi-colons, there are more bookmarks to process.
while(bookmarks.indexOf(";") != -1)
{

//Start building the position. Grab the substrings for the first minutes and seconds, and convert to seconds.
nextPositionSeconds = ( parseInt(bookmarks.substr(0,bookmarks.indexOf(':'))) * 60) + parseInt(bookmarks.substr(bookmarks.indexOf(':') + 1,bookmarks.indexOf(',')));

//Now trim the bookmarks string to remove the position.
bookmarks = bookmarks.substr(bookmarks.indexOf(',') + 1);

//Get the next title.
var nextTitle = bookmarks.substr(0,bookmarks.indexOf(';')); 

//Trim the bookmarks string to remove the title to prepare the code to loop again.
bookmarks = bookmarks.substr(bookmarks.indexOf(';') + 1);

//Add a link to the bookmarks list that seeks the player to the correct place.
bookmarksList.innerHTML = bookmarksList.innerHTML + '<li><a href=\"\" onclick=\"javascript:seekPlayer('+nextPositionSeconds+'); return false\">'+nextTitle+'</a></li>';
}

Propiedades de elementos multimedia y control de clasificación

Para agregar la sección de propiedades de elementos multimedia en la página, agregue otro DataFormWebPart mediante el procedimiento presentado en el tema Tutorial: Creación de un sitio de vídeo, pero no lo oculte. Coloque el elemento web donde desea que aparezca en la página y muestre los campos que desea que vean los usuarios.

Es posible que desee ocultar el objeto DataFormWebPart agregado en la página originalmente. En el tema Tutorial: Creación de un sitio de vídeo, se ocultó el control DataFormWebPart en lugar de eliminarlo, por lo que podrá extraerlo y moverlo a algún lugar más destacado (por ejemplo, directamente bajo el vídeo) de la página.

Para agregar el control de clasificación

Agregue un elemento <div> en el lugar de la página donde desea que aparezca el control de clasificación. Use un identificador reconocible, como ratingsDiv.

Agregue código de JavaScript para extraer el control y colóquelo entre las etiquetas <div> de apertura y de cierre.

var ratingsControl = document.getElementById(‘SPFieldAverageRating’).innerHTML;
var ratingsDiv = document.getElementById(‘ratingsDiv’);
ratingsDiv.innerHTML+=ratingsControl;
ratingsDiv.innerHTML+=ratingsControl;

Comentarios y el elemento web Panel de notas

Puede agregar el elemento web Panel de notas en la página para permitir a los usuarios dejar un comentario acerca de un vídeo. En el menú Insertar, elija Elemento web: el elemento web Panel de notas debe aparecer en la lista de elementos web. Si el elemento web Panel de notas no aparece en la lista, impórtelo a la Galería de elementos web.

Para importar el elemento web Panel de notas

Inicie el Explorador de Windows y, a continuación, navegue a un sitio de grupo o a otro sitio donde el Elemento web Panel de notas esté disponible.
Navegue a Configuración del sitio.
En la sección Galerías, haga clic en Elementos Web.
Elija Abrir en el menú Biblioteca mediante el Explorador de Windows y, a continuación, copie el Elemento web socialComment.dwp en el equipo.
Repita los pasos 2 y 3.
Cargue el Elemento web socialComment.dwp en la Galería de elementos web.

Para agregar el elemento web Panel de notas

En el menú Insertar, elija Elemento web y, a continuación, agregue el Elemento web Panel de notas en la página donde desea permitir al usuario agregar un comentario.

Nota

Para usar el Elemento web Panel de notas, habilite la Aplicación de servicio de perfiles de usuario y póngala a disposición en el servidor. Todos los usuarios del sitio deben disponer del permiso del perfil Usar características sociales.

Vídeos relacionados

Puede configurar la página para mostrar un conjunto de vídeos que se seleccionen en función de las palabras clave administradas proporcionadas para el vídeo actual.

Agregue en la página código de JavaScript para forzar la propiedad Keywords del vídeo en la dirección URL de la página. El código busca un parámetro RelatedKeywords en la dirección URL actual. Si no se encuentra el parámetro, usa el valor de la propiedad Keywords() del objeto DataFormWebPart y recarga la página.

//Check whether the RelatedKeywords parameter is found in the URL;if necessary, reload the page with the query string. 
var relatedKeywordsParam = "RelatedKeywords";
var urlParams = window.location.search;

//Runs if the URL parameters do not include RelatedKeywords parameters.
if(urlParams.indexOf(relatedKeywordsParam) == -1) 
{
var keywordsValue = (document.getElementsByName('KeywordsFieldValue'))[0].innerText;
var newUrl = window.location.toString(); 
newUrl+= '&'+relatedKeywordsParam+'=' + keywordsValue;
window.location.replace(newUrl);
}

En SharePoint Designer 2010, en el menú Insertar, elija Elemento web para agregar una instancia del objeto ContentByQueryWebPart en la página y para incluir una consulta queryString. El elemento web usa el valor del parámetro RelatedKeywords.
Configure Query para que use queryStringparameters de la dirección URL. Una de las nuevas funcionalidades del elemento web de consulta de contenido consiste en que puede aceptar de forma dinámica parámetros query en función de parámetros de cadena de consulta encontrados en una dirección URL. Puede usar esta funcionalidad para administrar vídeos relacionados, ya que la propiedad RelatedKeywords de la dirección URL, que se establece con JavaScript, contiene palabras clave administradas sobre las que se puede realizar el filtrado.
Establezca el valor Mostrar los elementos de la siguiente lista: en /Videos.
Establezca Palabras clave empresariales de la sección Filtros adicionales en [PageQueryString:RelatedKeywords].