비디오 갤러리 만들기: jQuery 업로드 컨트롤 및 HTML5 비디오 플레이어

시작하기

이것은 ASP.NET MVC 프로젝트입니다. 컨트롤이 작동하려면 라이브러리를 포함해야 Infragistics.Web.Mvc.dll. Razor를 사용하여 뷰에서 Ignite UI 사용하려면 다음 줄을 추가하기만 하면 됩니다.

@using Infragistics.Web.Mvc;

일반적으로 MVC 프로젝트를 만들 때 jQuery 스크립트가 이미 포함되어 있기 때문에 추가 할 필요가 없습니다. 따라서 우리가 추가해야 할 유일한 것은 그 뒤에 Infragistics 개의 스크립트입니다.

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

Infragistics CSS 폴더와 스크립트를 프로젝트의 적절한 폴더에 추가하는 것을 잊지 마십시오. 설치 폴더에서 찾을 수 있는 파일은 다음과 같습니다.

 

파일 업로드

Ignite UI File Upload를 사용하는 것은 쉬우므로 한 번에 하나의 파일을 업로드할지 여러 파일을 업로드할지 선택하고 적절한 코드를 작성하기만 하면 됩니다.

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

우리는 MVC 프로젝트를 사용하고 있으므로 Global.asax 파일에서 HTTP 핸들러의 URL을 무시해야합니다. 다음은 백 엔드 업로드 처리기에 대한 구성입니다.

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

이것은 클라이언트 측과 관련하여 수행해야 할 전부입니다. 이제 서버 측인 HTTP 핸들러와 모듈을 구성하는 방법을 살펴보겠습니다. 일부 동영상을 업로드할 예정이므로 저장할 장소가 필요합니다. 폴더(예: Uploads)를 만든 다음 다음과 같이 Web.config 파일에 해당 폴더를 등록합니다.

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

비디오를 업로드할 때 maxFileSizeLimit의 값을 적절한 크기로 설정해야 합니다. 모듈과 처리기를 등록하려면 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>

그리고 그게 다야. 이제 갤러리에 기능적이고 매력적인 파일을 업로드할 수 있습니다. 해당 컨트롤의 기능 및 일부 샘플에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

비디오 플레이어

따라서 업로드된 비디오를 Ignite UI 비디오 플레이어로 재생하려고 합니다. Razor ASP.NET MVC View에서 플레이어를 설정하려면 다음 줄을 사용해야합니다.

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

물론 비디오 소스를 설정해야 합니다. ASP.NET MVC 에서는 Render가 호출되기 전에 Source를 설정해야 합니다. 해당 플레이어로 모든 비디오를 재생하려면 업로드된 폴더의 모든 파일을 살펴보고 플레이어를 할당해야 합니다. 이를 위해 다음과 같은 foreach 루프를 만들 수 있습니다.

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

 

편의상 해당 코드는 Video 라는 새 뷰에 있습니다. 새로운 뷰이므로 페이지 상단에 Infragistics.Web.Mvc 를 포함하는 것을 잊지 마십시오. HomeController.cs에서 비디오 소스를 설정해야 합니다.

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

이것이 Ignite UI 비디오 플레이어로 비디오를 재생하는 방법입니다. 기능에 대한 자세한 내용과 플레이어의 일부 샘플은 여기에서 찾을 수 있습니다.

갤러리

단순하든 그렇지 않든 하나의 갤러리는 제대로 작동하는 경우에만 좋다고 할 수 있습니다. 동영상이 업로드될 때마다 전체 페이지가 다시 로드되는 것을 좋아하는 사람은 아무도 없기 때문에 새로 업로드된 동영상만 표시되기를 원합니다. 이렇게하려면 fileUploaded 이벤트 (해당 컨트롤에 대한 설명서에서 찾을 수있는 파일 업로드 이벤트에 대한 자세한 내용)와 jQuery를 사용하여 마술을 수행 할 수 있습니다.

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

이 코드는 새로 업로드된 동영상만 강제로 표시하는 데 도움이 됩니다. 비디오를 업로드 할 때 동일한 ID로 할당 될 수 있으며 새 비디오를 업로드하려고하면 이전 비디오 대신 나타납니다. 다음은 다음 줄입니다.

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

동일한 ID를 가진 동영상이 있으면 변경하고, 그렇지 않으면 이전 동영상에 추가하기만 하면 됩니다.

갤러리를 사용할 수 있게 되기 전에 마지막으로 해야 할 일이 하나 있습니다. 비디오 보기에 대한 컨트롤러를 설정해야 합니다. 다음 코드는 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();
}

따라서 위에서 언급 한 소스를 사용하여 다음과 같은 간단한 비디오 갤러리를 만들 수 있습니다.

여기에서 샘플 코드를 다운로드할 수 있습니다.

Twitter @에서 팔로우하고 Facebook, Google+ 및 LinkedIn에서 소식을 Infragistics 수 있습니다!