Available in the OSS Version

Video Player - Commercials

This sample demonstrates how to insert video advertisements into video playback in the jQuery video player, and how to specify the times to play the advertisements.

Always Play Commercials

This sample is designed for a larger screen size.

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

You can set a property in the jQuery video player to make the advertisements appear every time the end user replays the video. The sample demonstrates both how the inserted advertisements are played and how to set the property to a desired value. 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

Show In JsFiddle

Copy to Clipboard

HTML

                    <!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" />

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

        .ui-igslider .ui-igslider-bookmark-tooltip {
            width: auto;
        }
    </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.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>

    <div style="margin-bottom: 10px;">
        <span>
            Always Play Commercials
        </span>
        <span style="padding-left: 20px;">
            <select id="showCommercials" onchange="showCommercials();">
                <option>True</option>
                <option selected="selected">False</option>
            </select>
        </span>
        <div style="clear: both;">
        </div>
    </div>
    <div id="player1"></div>

    <script>

        $(function () {

            $("#player1").igVideoPlayer({
                sources: [
                    'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.h264.mp4',
                    'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.webmvp8.webm',
                    'https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.theora.ogv'
                ],
                width: 720,
                height: 272,
                posterUrl: '/images/samples/video-player/ig-pres.png',
                fullscreen: false,
                browserControls: false,
                autohide: false,
                autoplay: false,
                autohideDelay: 2000,
                title: 'Infragistics Presentation',
                commercials: {
                    linkedCommercials: [
                    {
                        sources: [
                            "https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.h264.mp4",
                            "https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.webmvp8.webm",
                            "https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.theora.ogv"],
                        startTime: 20,
                        title: 'Quince<br/>Presentation<br/>Part 1',
                        link: 'http://www.infragistics.com/'
                    },
                    {
                        sources: [
                            "https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
                            "https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
                            "https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"],
                        startTime: 100,
                        title: 'Quince<br/>Presentation<br/>Part 2',
                        link: 'https://www.infragistics.com/'
                    }],
                    adMessage: {
                        hideDelay: 13000
                    }
                }
            });
        });
        function showCommercials() {
            var alwaysPlay = $("#showCommercials").val() === "False" ? false : true;
            $("#player1").igVideoPlayer("option", "alwaysPlayCommercials", alwaysPlay);
        }
    </script>
</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Video Player - Commercials

Code View