Blog

Understanding the NetAdvantage for jQuery Video Player

Damyan Petev / Thursday, September 8, 2011

The NetAdvantage for jQuery package would not be complete without this feature rich Video player. Build on top of the HTML 5 video tag and jQuery UI it really can make your web page come alive with streaming video and also help you spread the word using built-in support for banners and additional advertisement videos, while taking full advantage of the performance the underlying technologies provide and maintaining the style *you* require.

Getting started

Here is probably the best place to mention that Taz Abdeali already did a blog post on getting started with our video player with either pure HTML/JavaScript, ASP.NET MVC or Web Forms development. You can read it here.

With that said, this article will focus more on providing some extra information.

What do you get out of the box?

Since it is based on the HTML5 Video you can expect all the functionality and limitations it comes with – standard sizing options; support for streaming video; autoplay, loop and preload options; a poster and a few controls. You also get the limitation in terms of video types supported by browsers, but that is a small price to pay for seamless support for all major browsers with no additional components required.

On the other hand it’s also based on jQuery UI Framework and as such has full Theme Roller support for styling the control and extensively uses CSS3 for fast loads and reduced requests.  But that is far from all you get.

The advantages of NetAdvantage jQuery Video Player

Looks

The styling feature the Video Player supports is probably its most outstanding feature. And it’s not just the ability to make it look a certain custom way. It’s not even the zero effort it would take for the igVideoPlayer to pick up the theme you might be using for other jQuery controls and blend in perfectly in the web page. Say the page uses the ‘UI lightness’ for example, in that case the player would pick up the styling.

And in the end it’s the ability to keep that consistent look and feel in all browsers! For HTML5 Video might be supported by many browsers, yet they have their own implementations – different control styling and even different set of controls; how they are placed and how the users can interact with them.

You get the picture, right? With the jQuery Video Player you get the same result in all browsers and full control on how that look is presented.

Keyboard shortcuts

This is another thing browsers handle in their own way along with which part of the player (if any) to be able to take focus. Some support almost full control with key strokes, some partially, some have none whatsoever. Again overriding the HTML5 controls with the ones the Video Player by Infragistics comes with gives a solution – it will always have the same focus properties and always support control with the keyboard. The documentation provides a list of keys and their actions.

Options

Whether you want to fine-tune every possible aspect or you want to keep it simple this control will deliver. It comes with all the HTML5 video tag options integrated, and more – things like controlling the time it takes the center button or control panel to hide (if it ever would for that matter); setting a video title; choosing if the seek tooltip should show and defining you own format to show the progress. You could even go back to using the browser’s default controls  …should you ever desire such thing.

Additional options/features

It’s possible to add banners or play advertisement videos at specified times. You can achieve that with by setting the banner property:

  1. @( Html.Infragistics().VideoPlayer()
  2.         .ID("vid")
  3.         .Banners(b =>
  4.             {b.AddBanner()
  5.             .CloseBanner(true)
  6.             .Autohide(true)
  7.             .Hidedelay(5000)
  8.             .ImageUrl("/content/banner.png")
  9.             .Link("http://infragistics.com/")
  10.             .Times(new List<int> {2,4,6,8,10});
  11.             })
  12.         .Sources(sources)
  13.         .Render()
  14.         )

The banners are transparent and while most properties of the banner builder are self-explanatory perhaps some deserve a few words – the ‘Times’  is presented as a List of times, which means that you can set multiple times for that very same banner to appear during playback; the ‘CloseBanner’ enables that little “X” button; the ‘Autohide’ property enables the banner to disappear on its own and ’Hidedelay’ sets just how long that should take.

And you could specify the position via the CSS property of the banner builder or dynamically change it with some jQuery:

  1. <script type="text/javascript">
  2.     var alternate = false;
  3.  
  4.     $(window).load(function () {
  5.         $("#player1").bind({
  6.             igvideoplayerbannervisible: function (sender, eventArgs) {
  7.                 if (alternate === true)
  8.                     eventArgs.bannerElement.css('top', 130);
  9.                 else
  10.                     eventArgs.bannerElement.css('top', 0);
  11.  
  12.                 alternate = !alternate;
  13.             },
  14.             igvideoplayerbannerclick: function () {
  15.                 $("#player1").igVideoPlayer('pause');
  16.             }
  17.         });
  18.     });
  19.     </script>

You can even put bookmarks along the progress bar so you can mark memorable moments and navigate them with great ease. And this is all achieved with something as simple as setting an option.

  1. @( Html.Infragistics().VideoPlayer()
  2.         .Height("500")
  3.         .Bookmarks(bm =>
  4.             {
  5.                 bm.AddBookmark()
  6.                .Title("DESIGN appears").Time(15);
  7.                 bm.AddBookmark()
  8.                .Title("+desire").Time(25);
  9.             })
  10.         .Sources(sources)
  11.         .Render()
  12.         )

Keep in mind the bookmarks add a ‘Skip To’ table below the video that is populated with links and this table is part of the whole, so consider adding a bit more height.

Commercials are added in very much the same manner and they also add a marker on the progress bar and once reached (or attempt to be skipped even) the original video will pause to play the commercial. The jQuery Video Player announces how much time it will be till video playback continues and also locks the progress bar for manipulation.

There’s even an option to define related video(s) and specify to play them in separate window or the same video control itself. With all those features built in it’s truly possible to turn a web page into something very close to the popular video sharing sites without the requirement of installing any additional plugins!

And of course there’s full screen option. Well close enough anyway – browsers won’t really allow for the content of a page to outside of it, but they do allow for the Video Player to take up the whole page Smile

As always all options come with common scenario defaults that can change in runtime with some JavaScript.

Events and Methods

Then there’s something you’d really expect from a control in the NetAdvantage for jQuery – it should fire events. And it does. What this means is that code with custom logic can be implemented at almost any stage of the playback or some other action related to the player like reaching a banner position or related video being clicked. And the player comes with more than a dozen methods to help implement that logic – checking the progress and state of the player and manipulating it. All conveniently ready to be put to work.

  1. <script type="text/javascript">
  2.     var alternate = false;
  3.     $(window).load(function () {
  4.         $("#vid").bind({
  5.                 igvideoplayerended: function(){
  6.                     //do something when video ends here
  7.                 }
  8.          });
  9.     });
  10. </script>

Advanced fallback

The igVideoPlayer comes with built-in fallback  that would display a user-friendly message letting the user know that the current browser is not supporting HTML5 Video and providing links to download the most popular browsers. But that only really happens if you leave the ‘browserUnsupported’ unhandled. It is possible when it is handled to hide the player and have an alternative one (such as Microsoft® Silverlight™ or Adobe® Flash™) play the video. Also the widget provides four methods that can be used to test if the browser supports any of the three HTML5 video formats or if it supports the tag itself at all. All of this provides a way to create a really custom behaviour  when users happen to use unsupported browsers.

Conclusion

The NetAdvantage for jQuery Video Player is here to enrich the contents of sites with video content powered by the best of Web technology. All achieved without the requirement of any additional plugins and as easy as setting a few options. Create customizable unique user experience with bookmarks, related videos and improved fallback. Add banners and commercial breaks to the videos and display it all in style that can follow the theme of the page and will maintain it in all browsers.

You can check the online samples here.

And a sample solution can be downloaded from here.