In the upcoming release of NetAdvantage 11.1, NetAdvantage for jQuery & NetAdvantage for ASP.NET will have a HTML5 Video Player control. Both are jQuery based client plug-ins and use the HTML5 video tag to play the video within the browser. This does not require any plug-in, however, the browser needs to support HTML5. It will work on both mobile and desktop browsers. As mentioned above, it is a client component but still packaged separately in the jQuery product and ASP.NET, what that means is that if you are a web forms developer and are using the ASP.NET control model, then you can instantiate the control in the same manner as any other web forms controls, and on the client instead of using ASP.NET AJAX framework, it will use jQuery to initialize itself. Similarly, in the NetAdvantage for jQuery package it will be accompanied by an ASP.NET MVC helper method, so you can plug the video player in your MVC views just like any other ASP.NET MVC view control or component.

In this blog, we will look at all the three different ways on how to get started with the HTML5 video player using plain HTML based application, ASP.NET Web Forms Application & ASP.NET MVC. We will be using the the Big Bucks Bunny Video hosted on our lab server to demonstrate it. 

Html/JavaScript

If you are developing with jQuery, this should be fairly simple task. Place an HTML place holder on your page, and then on document ready, convert the place holder to a jQuery widget, in this case to the Infragistics HTML5 Video Player. The options that we will set on the video player are self explanatory  and can be altered for custom default settings.

Required Script/CSS References:

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js" type="text/javascript"></script>  
<script src="Scripts/ig.ui.min.js" type="text/javascript"></script>
<link href="Styles/ig/jquery.ui.custom.css" rel="stylesheet" type="text/css" />
<link href="Styles/base/ig.ui.shared.css" rel="stylesheet" type="text/css" />
<link href="Styles/base/ig.ui.videoplayer.css" rel="stylesheet" type="text/css" />

HTML Place Holder:

<div id="igVideoPlayer" ></div>

Initialization Script:

$(function () {
    $("#igVideoPlayer").igVideoPlayer({
        sources: ["http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.mp4",
                  "http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.ogv",
                  "http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.webm"],
        posterUrl: 'http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.jpg',
        width: "100%",
        height: "100%",
        fullscreen: false,
        browserControls: false,
        autoplay: false,
        title: 'Big Buck Bunny',
        muted: true,
        autohide: true
    });
});

You can check this sample running here. To download code, click here.

ASP.NET MVC

To learn how to setup an ASP.NET MVC to use Infragistics MVC controls, check out the blog post here. Once you have the references in place, you can write your ASP.NET MVC Razor helper to initialize your controls within the MVC view. This way you also get Visual Studio, which helps when you are getting started with the controls. So, to do the same as we did in our HTML example above in Razor, this is how we will need to construct our helper method, and this will display the same video as in the HTML example above. 

Initializing using Razor Syntax:

@(Html.Infragistics().VideoPlayer()
       .Sources( new List<string> { "http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.mp4",
            "http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.ogv",
            "http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.webm" })
       .PosterUrl("http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.jpg")
       .Width("100%")
       .Height("100%")
       .Fullscreen(false)
       .BrowserControls(false)
       .Autoplay(false)
       .Title("Big Buck Bunny")
       .Muted(true)
       .Autohide(true)
       .Render()
) 

ASP.NET WebForm

Working within WebForms, it is still the same client side jQuery control, but we will use the ASP.NET Web Forms way to initializing and building UIs, and get the Video Player in our ASP.NET Web Forms application. You can do both in code-behind or in the ASPX markup, both with get you the video player and you can use your preferred way of initializing the control for your ASP.NET Web Forms applications.

Initializing in Code Behind:

VideoPlayerSource source1 = new VideoPlayerSource();
source1.Source = "http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.mp4";
VideoPlayerSource source2 = new VideoPlayerSource();
source2.Source = "http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.ogv";
VideoPlayerSource source3 = new VideoPlayerSource();
source3.Source = "http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.webm";
this.WebVideoPlayer1.Sources.Add(source1);
this.WebVideoPlayer1.Sources.Add(source2);
this.WebVideoPlayer1.Sources.Add(source3);
this.WebVideoPlayer1.PosterUrl = "http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.jpg";
this.WebVideoPlayer1.Width = Unit.Percentage(100);
this.WebVideoPlayer1.Height = Unit.Percentage(100);
this.WebVideoPlayer1.FullScreen = false;
this.WebVideoPlayer1.BrowserControls = false;
this.WebVideoPlayer1.BrowserControls = false;
this.WebVideoPlayer1.AutoPlay = false;
this.WebVideoPlayer1.Title = "Big Buck Bunny";
this.WebVideoPlayer1.Muted = true;
this.WebVideoPlayer1.AutoHide = true;

Initializing using ASPX Mark-Up:

<ig:WebVideoPlayer ID="WebVideoPlayer1" runat="server" 
     PosterUrl="http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.jpg"
     Width="100%"
     Height="100%"
     FullScreen="false"
     BrowserControls="false"
     AutoPlay="false"
     Title="Big Buck Bunny"
     Muted="true"
     AutoHide="true">
     <Sources>
         <ig:VideoPlayerSource Source="http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.mp4" />
         <ig:VideoPlayerSource Source="http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.ogv" />
         <ig:VideoPlayerSource Source="http://labs.infragistics.com/aspnet-mvc/content/videos/big_buck_bunny.webm" />
     </Sources>
</ig:WebVideoPlayer>

Conclusion

A part from learning how to use the Infragistics HTML5 video player in different web application development models, the key take away from post is to also highlight that the jQuery controls are purely server agnostic, and from a development standpoint what it boils down to is the framework and development choice. If you are a hard-core JavaScript jQuery developer, then you can pick the core JavaScript/CSS files and work off of that entirely. If you are an MVC developer, and want to work within that framework and inside of Visual Studio and take full advantage of it’s developer productivity tools, then you can use the ASP.NET MVC helpers to build up your views. Lastly, if the RAD development of Web Forms is your choice of building ASP.NET application, you can still do that as well with the Web Forms control wrappers.

Please share your feedback on the web products and let me know what you’d like to see me post in upcoming blogs. You can reach me at murtazaa@infragistics.com