ビデオ ギャラリーの作成: jQuery アップロード コントロールと HTML5 ビデオ プレーヤー

ビデオ ギャラリーの作成: jQuery アップロード コントロールと HTML5 ビデオ プレーヤー

UIパッケージには、さまざまな便利な機能が含まれています。このブログでは、次のようなファイルアップロードコントロールとビデオプレーヤーインタラクションコントロールを使用して簡単なビデオギャラリーを作成する方法について説明します。

6分読み取り
動画をアップロードする

はじめる

これは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 フォルダーとスクリプトをプロジェクト内の適切なフォルダーに追加することを忘れないでください。これらのファイルは、インストールフォルダにあります。

Infragistics CSS フォルダとスクリプトをプロジェクト内の適切なフォルダに追加することを忘れないでください

 

ファイルのアップロード

Ignite UIファイルのアップロードを使用するのは簡単です、あなたはただ一度に1つのファイルをアップロードするか、複数のファイルをアップロードするかを選択し、適切なコードを書く必要があります。

Single upload:

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

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

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ビューでプレーヤーを設定するには、次の行を使用する必要があります。

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

 

プレーヤーにビデオを割り当てる

便宜上、そのコードは [ビデオ] という新しいビューにあります。これは新しいビューであるため、ページの上部に 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ビデオプレーヤーでビデオを再生する方法です。機能の詳細とプレーヤーのサンプルについては、こちらをご覧ください。

シンプルであろうとなかろうと、1つのギャラリーは、適切に機能して初めて良いと言えます。動画がアップロードされるたびにページ全体が再読み込みされるのは誰も好きではないので、新しくアップロードされた動画のみを表示したいのです。これを行うには、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のビデオがある場合は変更し、そうでない場合は前のビデオに追加するだけです。

私たちのギャラリーが使えるようになる前に、最後にやらなければならないことが1つあります。ビデオビューのコントローラーを設定する必要があります。次のコードは、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でフォローしたり@Infragistics Facebook、Google +、LinkedInで連絡を取り合うことができます。​​

How To jQuery
デモを予約