Crear galería de vídeos: control de carga jQuery y reproductor de vídeo HTML5

Empezando

Este es un proyecto ASP.NET MVC. Para que nuestros controles funcionen, necesitamos incluir Infragistics.Web.Mvc.dll biblioteca. Para usar Ignite UI en su vista usando Razor simplemente agregue la siguiente línea:

@using Infragistics.Web.Mvc;

Generalmente, cuando creamos un proyecto MVC no necesitamos agregar scripts jQuery, porque ya están incluidos. Así que lo único que tenemos que añadir son los Infragistics scripts que les siguen:

<link type="text/css" href="@Url.Content("~/Content/css/themes/infragistics/infragistics.theme.css")" rel="stylesheet" />
<link type="text/css" href="@Url.Content("~/Content/css/structure/infragistics.css")" rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("~/Scripts/infragistics.core.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/infragistics.lob.js")"></script>

No olvide agregar la carpeta CSS Infragistics y los scripts a las carpetas apropiadas de su proyecto. Estos archivos los puedes encontrar en la carpeta de instalación:

 

La carga de archivos

Es fácil usar el Ignite UI File Upload, solo tienes que elegir si quieres subir un archivo a la vez o varios archivos y escribir el código adecuado:

Single upload:

@(  Html.Infragistics().Upload()
.ID("igUpload1").AddClientEvent("fileUploaded","UpHand")
.AutoStartUpload(true)
.ProgressUrl("/IGUploadStatusHandler.ashx")
.Render()
)

Multiple upload:

@(  Html.Infragistics().Upload()
.ID("igUpload1").AddClientEvent("fileUploaded","UpHand")
.Mode(UploadMode.Multiple)
.MultipleFiles(true)
.MaxUploadedFiles(5)
.MaxSimultaneousFilesUploads(2)
.AutoStartUpload(true)
.ProgressUrl("/IGUploadStatusHandler.ashx")
.Render()
)

Estamos usando el proyecto MVC, por lo que es necesario ignorar la URL del controlador HTTP en el archivo Global.asax. A continuación se muestra la configuración del controlador de carga de back-end:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("IGUploadStatusHandler.ashx");
 
    . . .
}

Esto es todo lo que necesita hacer cuando se trata del lado del cliente. Ahora veamos cómo configurar el lado del servidor: El controlador y el módulo HTTP. Vas a subir algunos videos, por lo que necesitas un lugar para guardarlos. Cree una carpeta, por ejemplo, Uploads y, a continuación, registre esa carpeta en el archivo Web.config de la siguiente manera:

<appSettings>
  <add key="fileUploadPath" value="~/Uploads" />
  <add key="maxFileSizeLimit" value="100000000" />
  . . .
</appSettings>

A medida que cargue vídeos, asegúrese de establecer el valor de maxFileSizeLimit en el tamaño adecuado. Para registrar los módulos y los controladores, use el siguiente código que vuelve a tener lugar en el archivo Web.config:

<system.webServer>
  <modules runAllManagedModulesForAllRequests="true">
    <add name="IGUploadModule" type="Infragistics.Web.Mvc.UploadModule" preCondition="managedHandler" />
  </modules>
  <handlers>
    <add name="IGUploadStatusHandler" path="IGUploadStatusHandler.ashx" verb="*" type="Infragistics.Web.Mvc.UploadStatusHandler" preCondition="integratedMode" />
  </handlers>
  <validation validateIntegratedModeConfiguration="false" />
</system.webServer>

Y eso es todo. Ahora tienes una carga de archivos funcional y atractiva para tu galería. Puede encontrar más información sobre las características de ese control y algunos ejemplos aquí.

El reproductor de vídeo

Por lo tanto, desea reproducir los videos cargados con Ignite UI reproductor de video. Para configurar el reproductor en Razor ASP.NET MVC vista tienes que usar las siguientes líneas:

@(Html.Infragistics().VideoPlayer()
.Height("200px")
.Width("300px")
.Title("Video Sample")
.Render()
)

Por supuesto, debe configurar la fuente de video. En ASP.NET MVC se debe establecer Source antes de llamar a Render. Como desea que todos sus videos se reproduzcan con ese reproductor, debe revisar todos los archivos de la carpeta cargada y asignarles el reproductor. Para hacer eso, puedes hacer un bucle foreach como este:

@foreach (var item in (ViewData["videoSources"] as string[]))
{
    <span class="videos">
 
     @(Html.Infragistics().VideoPlayer()
     .Height("200px")
     .Width("300px")
     .Title("Video Sample")
     .Sources(new List<String> { Url.Content(item) })
     .Render())
 
    </span>
}

 

Para mayor comodidad, ese código se encuentra en una nueva vista llamada Vídeo. Es una nueva vista, así que no olvide incluir Infragistics.Web.Mvc en la parte superior de la página. En el HomeController.cs debe configurar la fuente de video:

public ActionResult Index()
{
    /* Getting the path of the uploaded video files. */
 
    string[] paths = System.IO.Directory.GetFiles(Server.MapPath("~/Uploads"));
    for(int i = 0; i <  paths.length; i="" span="">
    {
 
        paths[i] = "~/Uploads/" + System.IO.Path.GetFileName(paths[i]);
        
    }
   
    ViewData["videoSources"] = paths;
    
    return View();
}

Así es como puedes reproducir tus videos con Ignite UI reproductor de video. Puede encontrar más información sobre las características, así como algunas muestras del reproductor, aquí.

La Galería

Simple o no, una galería puede llamarse buena solo si funciona correctamente. A nadie le gusta si toda la página se recarga cada vez que se sube un video, es por eso que desea que solo aparezca el video recién subido. Para hacerlo, puede usar el evento fileUploaded (puede encontrar más información sobre los eventos de carga de archivos en la documentación sobre ese control) y algo de jQuery para hacer la magia por usted.

<script>
    function UpHand(evt,ui) {    
        $.ajax({
            url: "@Url.Action("Video","Home")",
            data: {clip: ui.filePath}
        }).done(function (data) {
            if ($("#Video").children().length > 0) {
                $("#Video").append(data.replace(/VideoPlayer1/g, ("VideoPlayer" + $("#Video").children().length +1)));
            }
            else{
                $("#Video").append(data);
            }
        });
    };      
</script>

Este código le ayuda a forzar que aparezcan solo los videos recién cargados. Cuando subimos videos se pueden asignar con el mismo id, luego cuando intentemos subir un nuevo video aparecerá en el lugar del anterior. Aquí viene la siguiente línea:

if ($("#Video").children().length > 0) {
    $("#Video").append(data.replace(/VideoPlayer1/g, ("VideoPlayer" + $("#Video").children().length +1)));
}
else{
    $("#Video").append(data);
}

Si hay videos con el mismo id lo cambiamos, de lo contrario, simplemente lo agregamos al anterior.

Hay una última cosa que hay que hacer antes de que nuestra galería sea utilizable. Tienes que configurar el controlador para la vista de video. El siguiente código tiene lugar en el archivo HomeController.cs.

public PartialViewResult Video(string clip)
{
    string[] paths = new string[1] ;
    if (System.IO.File.Exists(Server.MapPath("~/Uploads/") + clip))
    {
        paths[0] = "~/Uploads/" + clip;
    }
 
    ViewData["videoSources"] = paths;
   return PartialView();
}

Entonces, usando la fuente mencionada anteriormente, podrá crear una galería de videos simple como esa:

Puede descargar el código de muestra desde aquí.

¡Puedes seguirnos en Twitter @ Infragistics y mantenerte en contacto en Facebook, Google+ y LinkedIn!