Available in the Full Version

Video Player - ASP.NET MVC

This is an example of using the ASP.NET MVC helper to instantiate the video player control in an ASP.NET MVC view.

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

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.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <style type="text/css">
        #player1 {
            z-index: 1000;
        }
    </style>


    <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.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>

    @(Html.
            Infragistics().
            VideoPlayer().
            ID("player1").
            Sources(ViewData["videoSources"] as List<string>).
            Width("100%").
            Fullscreen(false).
            BrowserControls(false).
            Autohide(false).
            Autoplay(false).
            VolumeAutohideDelay(2000).
            Title("Infragistics Presentation").
            Banners(c =>
                {
                    c.
                    AddBanner().
                    ImageUrl(Url.Content("~/images/samples/video-player/banner.png")).
                    Link("http://www.infragistics.com/").
                    Times(new List<int>() { 5, 20, 60 }).
                    Visible(false).
                    CloseBanner(true).
                    Animate(true).
                    Autohide(true).
                    Hidedelay(10000).
                    Width("270px").
                    Height("67px");
                }).
            PosterUrl(ViewData["posterUrl"] as string).
            Render()
        )


    <script>
        var alternate = false;

        $(function () {
            $("#player1").bind({
                igvideoplayerbannervisible: function (sender, eventArgs) {
                    if (alternate === true)
                        eventArgs.bannerElement.css('top', 130);
                    else
                        eventArgs.bannerElement.css('top', 0);

                    alternate = !alternate;
                },
                igvideoplayerbannerclick: function () {
                    $("#player1").igVideoPlayer('pause');
                }
            });
        });

    </script>
</body>
</html>