The Ignite UI for jQuery™ Video Player, or igVideoPlayer, is an HTML 5 video player, which renders video on a web page with a robust, cross-browser user interface. The video player is built using the HTML 5 video tag and the jQuery UI framework providing users with a fast-loading, rich multimedia experience without the need for installing and maintaining browser plugins.
When using the video player, you can choose from several implementation options. The video player exposes a rich jQuery API, which can be configured without the use of any specific server backend. Also, developers using the Microsoft® ASP.NET MVC framework can leverage the video player’s server-side helper to configure the control with their .NET™ language of choice.
Styling the igVideoPlayer provides a consistent appearance across supported browsers. The video player can utilize your existing style sheets and can be styled using jQuery UI’s ThemeRoller.
Figure 1: igVideoPlayer with player controls
The following steps demonstrate how to create a basic implementation of the video player on a web page using either jQuery client code or ASP.NET MVC server code.
Note: To read more about which implementation to choose, see Ignite UI for jQuery Overview.
Figure 2: igVideoPlayer showing initial video player view
On your HTML page or ASP.NET MVC View, reference the required JavaScript files, CSS files, and ASP.NET MVC assemblies.
Listing 1: CSS and JavaScript references for igVideoPlayer
In HTML:
<link type="text/css" href="/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="/css/structure/infragistics.css" rel="stylesheet" />
<script src="scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="/Scripts/Samples/infragistics.core.js"></script>
<script type="text/javascript" src="/Scripts/Samples/infragistics.lob.js"></script>
Listing 2: CSS and JavaScript references for igVideoPlayer in ASPX ASP.NET MVC View
In ASPX:
<%@ Import Namespace="Infragistics.Web.Mvc" %>
<!DOCTYPE html>
<html>
<head runat="server">
<link href="<%= Url.Content("~/css/themes/infragistics/infragistics.theme.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= Url.Content("~/css/structure/infragistics.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= Url.Content("~/scripts/jquery-1.4.4.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/scripts/jquery-ui.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/scripts/infragistics.core.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/scripts/infragistics.lob.js") %>" type="text/javascript"></script>
Listing 3: CSS and JavaScript references for igVideoPlayer in Razor ASP.NET MVC View
In Razor:
@using Infragistics.Web.Mvc;
<!DOCTYPE html>
<html>
<head>
<link href="@Url.Content("~/css/themes/infragistics/infragistics.theme.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/structure/infragistics.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/infragistics.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/infragistics.lob.js")" type="text/javascript"></script>
For jQuery implementations, define a div or video as the target element in HTML. This step is optional for ASP.NET MVC implementations as the Ignite UI for MVC creates the containing element for you.
Listing 4: Base DIV element defined for use with igVideoPlayer
In HTML:
<div id=”videoPlayer” ></div>
Once the above setup is complete, begin to set options including ID, Height, Width, and Title. The Height and Width options are strings which can be set as integer, pixel, or percent widths.
Note: For the ASP.NET MVC Views, the Render method must be called after all other options are set.
Listing 5: Instantiating igVideoPlayer in jQuery
In JavaScript:
<script type="text/javascript">
$(window).load(function () {
$('#videoPlayer').igVideoPlayer({
height: '300px',
width: '400px',
title: 'Video Sample'
});
});
</script>
Listing 6: Instantiating igVideoPlayer in ASPX ASP.NET MVC View
In ASPX:
<%= Html.Infragistics().VideoPlayer()
.ID("videoPlayer")
.Height("300px")
.Width("400px")
.Title("Video Sample")
.Render() %>
Listing 7: Instantiating igVideoPlayer in Razor ASP.NET MVC View
In Razor:
@(
Html.Infragistics().VideoPlayer()
.ID("videoPlayer")
.Height("300px")
.Width("400px")
.Title("Video Sample")
.Render()
)
For cross-browser compatibility, many sites will require hosting different formats for each video. For more information regarding HTML 5 video and browser support, please see the igVideoPlayer Working with HTML5 Video help topic. Set the sources option to the list of video sources.
Listing 8: Setting video sources in jQuery
In JavaScript:
$('#videoPlayer').igVideoPlayer({
height: '300px',
width: '400px',
title: 'Sample',
sources: ['http://www.yourdomainhere.com/videos/sample.mp4',
'http://www.yourdomainhere.com/videos/sample.webm',
'http://www.yourdomainhere.com/videos/sample.ogv']
});
Listing 9: Setting video sources in ASPX ASP.NET MVC View
In HTML:
<%= Html.Infragistics().VideoPlayer()
.ID("videoPlayer")
.Height("300px")
.Width("400px")
.Sources(ViewData["videoSources"] as List<String>)
.Render() %>
Listing 10: Setting video sources in Razor ASP.NET MVC View
In Razor:
@(
Html.Infragistics().VideoPlayer()
.ID("videoPlayer")
.Height("300px")
.Width("400px")
.Title("Video Sample")
.Sources(ViewData["videoSources"] as List<String)
.Render()
)
Listing 11: Setting video sources in the Controller for ASP.NET MVC for use in a View
In C#:
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["videoSources"] = new List<String> {
"http://yourdomainhere.com/videos/sample.mp4",
"http://yourdomainhere.com/videos/sample.webm",
"http://yourdomainhere.com/videos/sample.ogv" };
return View();
}
}
In Visual Basic:
Public Class HomeController
Inherits Controller
Public Function Index() As ActionResult
ViewData("videoSources") = New List(Of [String])() From { _
"http:// yourdomainhere.com/videos/sample.mp4", _
"http:// yourdomainhere.com/videos/sample.webm ", _
"http:// yourdomainhere.com/videos/sample.ogv" _
}
Return View()
End Function
End Class
Finally, run the web page in an HTML 5 - compliant browser and the video player will load the video selection.
View on GitHub