This sample demonstrates how to manage video playback by replacing the jQuery video player with an appropriate media control if the end user’s browser does not support HTML5 video.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
With the browserNotSupported event of the jQuery video player control, you can execute custom code to manage playback when an end user tries to browse the web page with a browser that does not support HTML5 video. In this sample, the jQuery Video Player is replaced with a Microsoft Silverlight media control to enable playback. Please view the sample in a browser without HTML5 video support (e.g., Internet Explorer 8) to best understand how this sample works. The video used for this sample does not contain audio.
Note: When running this sample on a mobile device, the default device video player controls are rendered, unless the Modernizr JavaScript library is undefined. If for some reason you don't have the Modernizr library available on your page, the igVideoPlayer control is rendered, which in some cases may have fewer touch capabilities than the default device video player. That's why this sample uses the Modernizr library and in mobile contexts the igVideoPlayer falls back to the default device video player.
Code View
Copy to Clipboard
@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Sample CSS -->
<style type="text/css">
#player1 {
z-index: 1000;
}
#silverlightControlHost {
display: none;
}
</style>
<script src="http://igniteui.com/js/silverlight.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
<script>
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";
errMsg += "Code: " + iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
alert(errMsg);
}
$(function () {
$("#player1").bind({
igvideoplayerbrowsernotsupported: function (sender, eventArgs) {
$("#silverlightControlHost").css("display", "block");
$("#player1").css("display", "none");
eventArgs.cancel = true;
}
});
});
</script>
<div>
@(Html.
Infragistics().
VideoPlayer().
ID("player1").
Width("720").
Height("540").
PosterUrl(ViewData["posterUrl"] as string).
Fullscreen(false).
BrowserControls(false).
Autohide(true).
Title("Infragistics Presentation").
Sources(ViewData["videoSources"] as List<string>).
Render()
)
</div>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="720px" height="540px">
<param name="source" value="http://igniteui.com/xap/video-player-fallback.xap" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
style="border-style: none" />
</a>
</object>
<iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px; border: 0px"></iframe>
</div>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class VideoPlayerController : Controller
{
[ActionName("aspnet-mvc-helper")]
public ActionResult AspNetMvcHelper()
{
ViewData["videoSources"] = new List<string>() {
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.h264.mp4",
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.webmvp8.webm",
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.theora.ogv" };
ViewData["posterUrl"] = Url.Content("~/images/samples/video-player/ig-pres.png");
return View("aspnet-mvc-helper");
}
[ActionName("fallback-video")]
public ActionResult FallbackVideo()
{
ViewData["videoSources"] = new List<string>() {
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.h264.mp4",
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.webmvp8.webm",
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.theora.ogv" };
ViewData["posterUrl"] = Url.Content("~/images/samples/video-player/quince-intro-1.png");
return View("fallback-video");
}
}
}
