Available in the OSS Version

Video Player - Bookmarks

This sample demonstrates how to add bookmarks to the jQuery video player control during initialization.

This sample is designed for a larger screen size.

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

Note: 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" />

    <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/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: "100%",
                posterUrl: '/images/samples/video-player/ig-pres.png',
                fullscreen: false,
                browserControls: false,
                autohide: false,
                autoplay: false,
                autohideDelay: 2000,
                title: 'Infragistics Presentation',
                bookmarks: [{
                    title: 'Design',
                    description: 'Infragistics design presentation',
                    time: 14
                },
                {
                    title: 'Develop',
                    description: 'Infragistics develop presentation',
                    time: 46
                },
                {
                    title: 'Experience',
                    description: 'Infragistics experience presentation',
                    time: 74
                },
                {
                    title: 'Final',
                    description: 'Infragistics logo',
                    time: 100
                }]
            });
        });
    </script>
</body>
</html>