Available in the OSS Version

Video Player - Related Videos

This sample demonstrates how to display a list of related videos for viewing in the jQuery video player.
00:00
Quince Presentation Part 1
No compatible video source.

This sample is designed for a larger screen size.

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

The video player can offer a choice of related videos to watch in the same video player control or on a separate page. 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 
<!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;
        }

        .relatedVideosBanner {
            width: 80px;
            height: 80px;
        }
    </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>

    <div id="player1"></div>

    <script>
        $(function () {
            $("#player1").igVideoPlayer({
                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"
                ],
                width: 720,
                height: 560,
                posterUrl: "/images/samples/video-player/quince-intro-1.png",
                fullscreen: false,
                browserControls: false,
                autohide: true,
                autoplay: false,
                showSeekTime: true,
                title: "Quince Presentation Part 1",
                relatedVideos: [{
                    imageUrl: "/images/samples/video-player/quince-intro-2.png",
                    title: "Quince Presentation Part 1",
                    css: "relatedVideosBanner",
                    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"
                    ]
                }]
            });
        });
    </script>
</body>
</html>