Criar Galeria de Vídeos: Controle de Upload do jQuery e Player de Vídeo HTML5

Primeiros passos

Este é um projeto ASP.NET MVC. Para que nossos controles funcionem, precisamos incluir Infragistics.Web.Mvc.dll biblioteca. Para usar Ignite UI em sua Visualização usando Razor basta adicionar a seguinte linha:

@using Infragistics.Web.Mvc;

Geralmente, quando criamos um projeto MVC, não precisamos adicionar scripts jQuery, porque eles já estão incluídos. Portanto, a única coisa que precisamos adicionar são os Infragistics scripts depois deles:

<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>

Não se esqueça de anexar a pasta CSS Infragistics e os scripts às pastas apropriadas em seu projeto. Esses arquivos você pode encontrar na pasta de instalação:

 

O upload do arquivo

É fácil usar o Ignite UI File Upload, você só precisa escolher se deseja fazer upload de um arquivo por vez ou de vários arquivos e escrever o código adequado:

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 o projeto MVC, portanto, é necessário ignorar a URL do manipulador HTTP no arquivo Global.asax. Veja a seguir a configuração do manipulador de upload de back-end:

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

Isso é tudo que você precisa fazer quando se trata do lado do cliente. Agora vamos ver como configurar o lado do servidor: O manipulador e o módulo HTTP. Você vai enviar alguns vídeos, então precisa de um lugar para salvá-los. Crie uma pasta, por exemplo, Uploads e, em seguida, registre essa pasta no arquivo Web.config da seguinte forma:

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

Ao enviar vídeos, certifique-se de definir o valor de maxFileSizeLimit para o tamanho apropriado. Para registrar os módulos e os manipuladores, use o seguinte código que ocorre novamente no arquivo 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>

E é isso. Agora você tem um upload de arquivo funcional e atraente para sua galeria. Você pode encontrar mais informações sobre os recursos desse controle e alguns exemplos aqui.

O reprodutor de vídeo

Então você deseja reproduzir os vídeos enviados com Ignite UI player de vídeo. Para configurar o player no Razor ASP.NET MVC View, você deve usar as seguintes linhas:

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

Claro que você precisa definir a fonte de vídeo. Em ASP.NET MVC a Origem deve ser definida antes que Render seja chamado. Como você deseja que todos os seus vídeos sejam reproduzidos com esse player, você precisa passar por todos os arquivos na pasta carregada e atribuir a eles o player. Para fazer isso, você pode fazer um loop 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>
}

 

Por conveniência, esse código está em uma nova exibição chamada Vídeo. É uma nova visualização, então não se esqueça de incluir o Infragistics.Web.Mvc no topo da página. No HomeController.cs você precisa definir a fonte do vídeo:

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();
}

Então, é assim que você reproduz seus vídeos com Ignite UI Video Player. Mais informações sobre os recursos, bem como algumas amostras do player, você pode encontrar aqui.

A Galeria

Simples ou não, uma galeria só pode ser chamada de boa se funcionar corretamente. Ninguém gosta que a página inteira seja recarregada toda vez que um vídeo é carregado, é por isso que você deseja que apenas o vídeo recém-carregado apareça. Para fazer isso, você pode usar o evento fileUploaded (mais sobre os eventos de upload de arquivo que você pode encontrar na documentação sobre esse controle) e um pouco de jQuery para fazer a mágica para você.

<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 ajuda você a forçar apenas os vídeos recém-enviados a aparecer. Quando carregamos vídeos, eles podem ser atribuídos com o mesmo id e, quando tentamos enviar um novo vídeo, ele aparecerá no lugar do anterior. Aí vem a seguinte linha:

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

Se houver vídeos com o mesmo id, nós o alteramos, caso contrário, apenas o anexamos ao anterior.

Há uma última coisa que precisa ser feita antes que nossa galeria se torne utilizável. Você deve definir o controlador para a Visualização de vídeo. O código a seguir ocorre no arquivo 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();
}

Então, usando a fonte mencionada acima, você poderá criar uma galeria de vídeos simples como essa:

Você pode baixar o código de exemplo aqui.

Você pode nos seguir no Twitter @ Infragistics e manter contato no Facebook, Google+ e LinkedIn!