ui.igVideoPlayer

ui.igVideoPlayer_image

The VideoPlayer is a jQuery UI widget that displays HTML 5 video with a consistent UI across browsers and a full set of end-user player controls. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igVideoPlayer control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igVideoPlayer control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

  
        <!doctype html>
        <html>
        <head>
            <!-- Infragistics Combined CSS -->
            <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
            <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
            <!-- jQuery Core -->
            <script src="js/jquery.js" type="text/javascript"></script>
            <!-- jQuery UI -->
            <script src="js/jquery-ui.js" type="text/javascript"></script>
            <!-- Infragistics Combined Scripts -->
			<script src="js/infragistics.core.js" type="text/javascript"></script>
			<script src="js/infragistics.lob.js" type="text/javascript"></script>
            <script type="text/javascript">
                $(function () {
                    $("#videoPlayer").igVideoPlayer({
                        height: "300px",
                        width: "400px",
                        title: "Sample",
                        sources: ["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"
                        ]
                    });
                });
            </script>
        </head>
        <body>
	        <div id="videoPlayer"></div>
        </body>
        </html>
    

Related Samples

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js
infragistics.ui.shared.js

Inherits

  • autohide

    Type:
    bool
    Default:
    true

    Gets/Sets whether player controls will auto hide when video is not hovered. This is applicable only when Infragistics playback controls are used.

    Code Sample

     
    					//Initialize
    					$(".selector").igVideoPlayer({
    						autohide:true
    						});
    
    					//Get
    					var hide = $(".selector").igVideoPlayer("option", "autohide");
    
    					//Set
    					$(".selector").igVideoPlayer("option", "autohide", true);
    				 
  • autoplay

    Type:
    bool
    Default:
    false

    Gets/Sets whether the video should start playing immediately after the control is loaded.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					autoplay:true
    				});
    
    				//Get
    				var autoPlay = $(".selector").igVideoPlayer("option", "autoplay");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "autoplay", true);
    			 
  • banners

    Type:
    array
    Default:
    []
    Elements Type:
    object

    Gets/Sets an array of banner objects that will show the banners when the video clip is played.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    						banners: [{
    							imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
    							link: "http://quince.infragistics.com/",
    							times: [5, 20, 60],
    							visible: false,
    							closeBanner: true,
    							animate: true,
    							autohide: true,
    							hidedelay: 10000,
    							width: "200px",
    							height: "67px"
    						}]
    					});
    
    				//Get
    				var banners = $(".selector").igVideoPlayer("option", "banners");
    
    				//Set
    				var banners = [{
    						imageUrl: 'http://www.igniteui.com/images/samples/video-player/quince-intro-1.png',
    						link: 'http://quince.infragistics.com/',
    						times: [5, 20, 60],
    						visible: false,
    						closeBanner: true,
    						animate: true,
    						autohide: true,
    						hidedelay: 10000,
    						width: "200px",
    						height: "67px"
    					}];
    				$(".selector").igVideoPlayer("option", "banners", banners);
    			 
    • animate

      Type:
      bool
      Default:
      true

      Gets/Sets whether to apply animation effects when showing or hiding the banner. If set to true, the animation is played for banner.duration in milliseconds.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      							banners: [{
      								imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      								link: "http://quince.infragistics.com/",
      								times: [5, 20, 60],
      								visible: false,
      								closeBanner: true,
      								animate: true,
      								autohide: true,
      								hidedelay: 10000,
      								width: "200px",
      								height: "67px"
      							}]
      						});
      
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var animate = banners[0].animate;
      
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].animate = true;
      				 
    • autohide

      Type:
      bool
      Default:
      false

      Gets/Sets whether to automatically hide the banner. If set to true, the banner is hidden after hidedelay in milliseconds.

      Code Sample

       
      				//Initialize
      					$(".selector").igVideoPlayer({
      							banners: [{
      								imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      								link: "http://quince.infragistics.com/",
      								times: [5, 20, 60],
      								visible: false,
      								closeBanner: true,
      								animate: true,
      								autohide: true,
      								hidedelay: 10000,
      								width: "200px",
      								height: "67px"
      							}]
      						});
      
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var autohide = banners[0].autohide;
      
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].autohide = true;
      				 
    • closeBanner

      Type:
      bool
      Default:
      true

      Gets/Sets whether the user will be able to close the banner or not.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      							banners: [{
      								imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      								link: "http://quince.infragistics.com/",
      								times: [5, 20, 60],
      								visible: false,
      								closeBanner: true,
      								animate: true,
      								autohide: true,
      								hidedelay: 10000,
      								width: "200px",
      								height: "67px"
      							}]
      						});
      
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var closeBanner = banners[0].closeBanner;
      
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].closeBanner = true;
      				 
    • css

      Type:
      string
      Default:
      null

      Gets/Sets the banner specific css class, that will be applied on the banner grid.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      							banners: [{
      								imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      								link: "http://quince.infragistics.com/",
      								times: [5, 20, 60],
      								visible: false,
      								closeBanner: true,
      								animate: true,
      								autohide: true,
      								hidedelay: 10000,
      								width: "200px",
      								height: "67px",
      								css: "bannerCss"
      							}]
      						});
      
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var css = banners[0].css;
      
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].css = "bannerCss";
      				 
    • duration

      Type:
      number
      Default:
      1000

      Gets/Sets the banner animation duration.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      							banners: [{
      								imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      								link: "http://quince.infragistics.com/",
      								times: [5, 20, 60],
      								visible: false,
      								closeBanner: true,
      								animate: true,
      								autohide: true,
      								duration: 2000,
      								hidedelay: 10000,
      								width: "200px",
      								height: "67px"
      							}]
      						});
      
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var duration = banners[0].duration;
      
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].duration = 2000;
      				 
    • height

      Type:
      enumeration
      Default:
      null

      Gets/Sets the banner height.

      Code Sample

       
      				//Initialize
      					$(".selector").igVideoPlayer({
      							banners: [{
      								imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      								link: "http://quince.infragistics.com/",
      								times: [5, 20, 60],
      								visible: false,
      								closeBanner: true,
      								animate: true,
      								autohide: true,
      								hidedelay: 10000,
      								width: "200px",
      								height: "67px"
      							}]
      						});
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var height = banners[0].height;
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].height = "67px";
      				 
    • hidedelay

      Type:
      number
      Default:
      10000

      Gets/Sets the banner autohide delay in milliseconds. It is taken into account only if the banner.autohide option is set to true.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      							banners: [{
      								imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      								link: "http://quince.infragistics.com/",
      								times: [5, 20, 60],
      								visible: false,
      								closeBanner: true,
      								animate: true,
      								autohide: true,
      								hidedelay: 10000,
      								width: "200px",
      								height: "67px"
      							}]
      						});
      
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var hidedelay = banners[0].hidedelay;
      
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].hidedelay = 10000;
      				 
    • imageUrl

      Type:
      string
      Default:
      ""

      Gets/Sets the banner image url.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						banners: [{
      							imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      							link: "http://quince.infragistics.com/",
      							times: [5, 20, 60],
      							visible: false,
      							closeBanner: true,
      							animate: true,
      							autohide: true,
      							hidedelay: 10000,
      							width: "200px",
      							height: "67px"
      						}]
      					});
      
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var imageUrl = banners[0].imageUrl;
      
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].imageUrl = "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png";
      				 
    • link

      Type:
      string
      Default:
      null

      Gets/Sets the banner link that will open in new window.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      							banners: [{
      								imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      								link: "http://quince.infragistics.com/",
      								times: [5, 20, 60],
      								visible: false,
      								closeBanner: true,
      								animate: true,
      								autohide: true,
      								hidedelay: 10000,
      								width: "200px",
      								height: "67px"
      							}]
      						});
      
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var link = banners[0].link;
      
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].link = "http://quince.infragistics.com/";
      				 
    • times

      Type:
      array
      Default:
      []
      Elements Type:
      object

      Gets/Sets an array of numbers. Each number specifies on which second in the movie the banner will pop.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      							banners: [{
      								imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      								link: "http://quince.infragistics.com/",
      								times: [5, 20, 60],
      								visible: false,
      								closeBanner: true,
      								animate: true,
      								autohide: true,
      								hidedelay: 10000,
      								width: "200px",
      								height: "67px"
      							}]
      						});
      
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var times = banners[0].times;
      
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].times = [5, 20, 60];
      				 
    • visible

      Type:
      bool
      Default:
      true

      Gets/Sets whether the banner is visible or not.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      							banners: [{
      								imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      								link: "http://quince.infragistics.com/",
      								times: [5, 20, 60],
      								visible: false,
      								closeBanner: true,
      								animate: true,
      								autohide: true,
      								hidedelay: 10000,
      								width: "200px",
      								height: "67px"
      							}]
      						});
      
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var visible = banners[0].visible;
      
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].visible = false;
      				 
    • width

      Type:
      enumeration
      Default:
      null

      Gets/Sets the banner width.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      							banners: [{
      								imageUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png",
      								link: "http://quince.infragistics.com/",
      								times: [5, 20, 60],
      								visible: false,
      								closeBanner: true,
      								animate: true,
      								autohide: true,
      								hidedelay: 10000,
      								width: "200px",
      								height: "67px"
      							}]
      						});
      					//Get
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					var width = banners[0].width;
      					//Set
      					var banners = $(".selector").igVideoPlayer("option", "banners");
      					banners[0].width = "200px";
      				 
  • bookmarks

    Type:
    array
    Default:
    []
    Elements Type:
    object

    Gets/Sets an array of bookmarks that will be displayed in the video player control.

    Code Sample

     
    					//Initialize
    					$(".selector").igVideoPlayer({
    					bookmarks: [
    							{
    								title: "Design",
    								time: 14
    							},
    							{
    								title: "Develop",
    								time: 46
    							},
    							{
    								title: "Experience",
    								time: 74
    							}
    						]
    					});
    
    					//Get
    					var bookmarks = $(".selector").igVideoPlayer("option", "bookmarks");
    
    					//Set
    					$(".selector").igVideoPlayer("option", "bookmarks", [{title: "Experience", time: 74 }]);
    				 
    • disabled

      Type:
      bool
      Default:
      false

      Gets/Sets whether the bookmark is disabled or not.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      					bookmarks: [
      						{
      							title: "Experience",
      							time: 74,
      							disabled: true
      							}
      						]
      					});
      
      					//Get
      					var bookmarks = $(".selector").igVideoPlayer("option", "bookmarks");
      					var disabled = bookmarks[0].disabled;
      
      					//Set
      					var bookmarks = $(".selector").igVideoPlayer("option", "bookmarks");
      					bookmarks[0].disabled = false;
      				 
    • time

      Type:
      number
      Default:
      0

      Gets/Sets where the bookmark will be positioned. Should be between 0 and movie duration in seconds.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						bookmarks: [
      							{
      								title: "Experience",
      								time: 74
      							}
      						]
      					});
      
      					//Get
      					var bookmarks = $(".selector").igVideoPlayer("option", "bookmarks");
      					var time = bookmarks[0].time;
      
      					//Set
      					var bookmarks = $(".selector").igVideoPlayer("option", "bookmarks");
      					bookmarks[0].time = 12;
      				 
    • title

      Type:
      string
      Default:
      ""

      Gets/Sets bookmark title. It is shown as tooltip on hover.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						bookmarks: [
      							{
      								title: "Experience",
      								time: 74
      							}
      						]
      					});
      
      					//Get
      					var bookmarks = $(".selector").igVideoPlayer("option", "bookmarks");
      					var title = bookmarks[0].title;
      
      					//Set
      					var bookmarks = $(".selector").igVideoPlayer("option", "bookmarks");
      					bookmarks[0].title = "Infragistics Experience";
      				 
  • browserControls

    Type:
    bool
    Default:
    false

    Gets/Sets whether if you want to use the built in browser controls. By default player uses Infragistics playback controls. Note that you may have different look and feel across different browsers if you use the built in browser controls. When this option is set to true, no commercials will be displayed as they are not supported.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					browserControls: true
    				});
    
    				//Get
    				var controls = $(".selector").igVideoPlayer("option", "browserControls");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "browserControls", true);
    			 
  • centerButtonHideDelay

    Type:
    number
    Default:
    1200

    Gets/Sets the center big button hide delay.

    Code Sample

     
    					//Initialize
    					$(".selector").igVideoPlayer({
    						centerButtonHideDelay:2400
    					});
    
    					//Get
    					var delay = $(".selector").igVideoPlayer("option", "centerButtonHideDelay");
    
    					//Set
    					$(".selector").igVideoPlayer("option", "centerButtonHideDelay", 2400);
    				 
  • commercials

    Type:
    object
    Default:
    {}

    Gets/Sets an array of commercials objects that will be displayed when the video is playing. Note that broswerControls doesn't support commercials.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					commercials: {
    						linkedCommercials: [
    						{
    							sources: [
    							"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
    							"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
    							"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
    						],
    							startTime: 20,
    							title: "Quince Presentation p1",
    							link: "http://quince.infragistics.com/"
    						},
    						{
    							sources: [
    							"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
    							"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
    							"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
    						],
    							startTime: 100,
    							title: "Quince Presentation p3",
    							link: "http://quince.infragistics.com/"
    						}]
    					}
    				});
    
    				//Get
    				var commercials = $(".selector").igVideoPlayer("option", "commercials");
    
    				//Set
    				var commercials = {
    					linkedCommercials: [
    					{
    						sources: [
    						"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
    						"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
    						"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
    					],
    						startTime: 20,
    						title: 'Quince<br/>Presentation<br/>p1',
    						link: 'http://quince.infragistics.com/'
    					}],
    					adMessage: {
    						hideDelay: 3000
    					}
    				};
    				$(".selector").igVideoPlayer("option", "commercials", commercials);
    			 
    • adMessage

      Type:
      object
      Default:
      {}

      Customizes the ad message settings of the commercial. Ad message shows the duration of the commercial and pops up when the commercial starts playing.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						commercials: {
      							linkedCommercials: [
      							{
      								sources: [
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
      							],
      								startTime: 20,
      								title: "Quince Presentation p1",
      								link: "http://quince.infragistics.com/"
      							},
      							{
      								sources: [
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
      							],
      								startTime: 100,
      								title: "Quince Presentation p3",
      								link: "http://quince.infragistics.com/"
      							}],
      							adMessage: {
      								animate: true,
      								animationDuration: 1000,
      								autoHide: true,
      								hideDelay: 5000
      							}
      						}
      					});
      
      					//Get
      					var commercials = $(".selector").igVideoPlayer("option", "commercials");
      					var adMessage = commercials.adMessage;
      
      					//Set
      					var commercials = $(".selector").igVideoPlayer("option", "commercials");
      					var adMessage = {
      								animate: true,
      								animationDuration: 1000,
      								autoHide: true,
      								hideDelay: 5000
      							};
      					commercials.adMessage = adMessage;
      				 
      • animate

        Type:
        bool
        Default:
        true

        Gets/Sets whether to apply an animation effect when showing or hiding the ad message. If set to true, the animation is played for animationDuration in milliseconds.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								linkedCommercials: [
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 20,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								},
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 100,
        									title: "Quince Presentation p3",
        									link: "http://quince.infragistics.com/"
        								}],
        								adMessage: {
        									animate: true,
        									animationDuration: 1000,
        									autoHide: true,
        									hideDelay: 5000
        								}
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var animate = commercials.adMessage.animate;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.adMessage.animate = false;
        					 
      • animationDuration

        Type:
        number
        Default:
        1000

        Gets/Sets the ad message animation duration of the commercial.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								linkedCommercials: [
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 20,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								},
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 100,
        									title: "Quince Presentation p3",
        									link: "http://quince.infragistics.com/"
        								}],
        								adMessage: {
        									animationDuration: 2000
        								}
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var animationDuration = commercials.adMessage.animationDuration;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.adMessage.animationDuration = 1000;
        					 
      • autoHide

        Type:
        bool
        Default:
        true

        Gets/Sets the ad message auto hide of the commercial.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								linkedCommercials: [
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 20,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								},
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 100,
        									title: "Quince Presentation p3",
        									link: "http://quince.infragistics.com/"
        								}],
        								adMessage: {
        									autoHide: false
        								}
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var autoHide = commercials.adMessage.autoHide;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.adMessage.autoHide = true;
        					 
      • hideDelay

        Type:
        number
        Default:
        20000

        Gets/Sets the ad message hide delay.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								linkedCommercials: [
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 20,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								},
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 100,
        									title: "Quince Presentation p3",
        									link: "http://quince.infragistics.com/"
        								}],
        								adMessage: {
        									hideDelay: 5000
        								}
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var hideDelay = commercials.adMessage.hideDelay;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.adMessage.hideDelay = 4000;
        					 
    • alwaysPlayCommercials

      Type:
      bool
      Default:
      false

      Gets/Sets whether the commercials will play againg during the repetitive video plays.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						commercials: {
      							alwaysPlayCommercials: true
      						}
      					});
      
      					//Get
      					var commercials = $(".selector").igVideoPlayer("option", "commercials");
      					var alwaysPlayCommercials = commercials.alwaysPlayCommercials;
      
      					//Set
      					var commercials = $(".selector").igVideoPlayer("option", "commercials");
      					commercials.alwaysPlayCommercials = true;
      				 
    • embeddedCommercials

      Type:
      array
      Default:
      []
      Elements Type:
      object

      Gets/Sets an array of embedded commercials objects. An embedded commercial is an ad that is contained in the original video file. It is suitable when you want to mark some sections of the video as commercials.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						commercials: {
      							embeddedCommercials: [
      							{
      								sources: [
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
      							],
      								startTime: 20,
      								endTime: 30,
      								title: "Quince Presentation p1",
      								link: "http://quince.infragistics.com/"
      							}]
      						}
      					});
      
      					//Get
      					var commercials = $(".selector").igVideoPlayer("option", "commercials");
      					var embeddedCommercials = commercials.embeddedCommercials;
      
      					//Set
      					var commercials = $(".selector").igVideoPlayer("option", "commercials");
      					var embeddedCommercials = [
      							{
      								sources: [
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
      							],
      								startTime: 20,
      								endTime: 30,
      								title: "Quince Presentation p1",
      								link: "http://quince.infragistics.com/"
      							}
      					];
      					commercials.embeddedCommercials = embeddedCommercials;
      				 
      • endTime

        Type:
        number
        Default:
        30

        Gets/Sets the end second of the embedded commercial.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								embeddedCommercials: [
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 20,
        									endTime: 30,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								}]
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var endTime = commercials.embeddedCommercials[0].endTime;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.embeddedCommercials[0].endTime = 30;
        					 
      • link

        Type:
        string
        Default:
        ""

        Gets/Sets the sponsored link of the embedded commercial.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								embeddedCommercials: [
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 20,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								}]
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var link = commercials.embeddedCommercials[0].link;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.embeddedCommercials[0].link = "http://quince.infragistics.com/";
        					 
      • startTime

        Type:
        number
        Default:
        20

        Gets/Sets the start second of the embedded commercial.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								embeddedCommercials: [
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 20,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								}]
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var startTime = commercials.embeddedCommercials[0].startTime;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.embeddedCommercials[0].startTime = 20;
        					 
      • title

        Type:
        string
        Default:
        ""

        Gets/Sets the tooltip for the bookmark of the embedded commercial.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								embeddedCommercials: [
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 20,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								}]
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var title = commercials.embeddedCommercials[0].title;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.embeddedCommercials[0].title = "Quince Presentation p1";
        					 
    • linkedCommercials

      Type:
      array
      Default:
      []
      Elements Type:
      object

      Gets/Sets an array of linked commercial objects. A linked commercial is a separate video file that will be played in the specified position of the original movie clip by startTime. This feature is useful if you have frequently changing outside commercial sources.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						commercials: {
      							linkedCommercials: [
      							{
      								sources: [
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
      							],
      								startTime: 20,
      								title: "Quince Presentation p1",
      								link: "http://quince.infragistics.com/"
      							},
      							{
      								sources: [
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
      							],
      								startTime: 100,
      								title: "Quince Presentation p3",
      								link: "http://quince.infragistics.com/"
      							}]
      						}
      					});
      
      					//Get
      					var commercials = $(".selector").igVideoPlayer("option", "commercials");
      					var linkedCommercials = commercials.linkedCommercials;
      
      					//Set
      					var commercials = $(".selector").igVideoPlayer("option", "commercials");
      					var linkedCommercials = [
      							{
      								sources: [
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
      								"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
      							],
      								startTime: 100,
      								title: "Quince Presentation p3",
      								link: "http://quince.infragistics.com/"
      							}
      					];
      					commercials.linkedCommercials = linkedCommercials;
      				 
      • link

        Type:
        string
        Default:
        ""

        Gets/Sets the link to open on linked commercial click.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								linkedCommercials: [
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 20,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								}]
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var link = commercials.linkedCommercials[0].link;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.linkedCommercials[0].link = "http://quince.infragistics.com/";
        					 
      • sources

        Type:
        array
        Default:
        []
        Elements Type:
        object

        Gets/Sets the sources of the linked commercial video.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								linkedCommercials: [
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 20,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								}]
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var sources = commercials.linkedCommercials[0].sources;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.linkedCommercials[0].sources = ["http://quince.infragistics.com/"];
        					 
      • startTime

        Type:
        number
        Default:
        10

        Gets/Sets the second in the video at which the linked commercial should play.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								linkedCommercials: [
        								{
        									sources: [
        										"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        										"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        										"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        									],
        									startTime: 20,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								}]
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var startTime = commercials.linkedCommercials[0].startTime;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.linkedCommercials[0].startTime = 20;
        					 
      • title

        Type:
        string
        Default:
        ""

        Gets/Sets the tooltip for the linked commercial bookmark.

        Code Sample

         
        						//Initialize
        						$(".selector").igVideoPlayer({
        							commercials: {
        								linkedCommercials: [
        								{
        									sources: [
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
        									"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
        								],
        									startTime: 20,
        									title: "Quince Presentation p1",
        									link: "http://quince.infragistics.com/"
        								}]
        							}
        						});
        
        						//Get
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						var title = commercials.linkedCommercials[0].title;
        
        						//Set
        						var commercials = $(".selector").igVideoPlayer("option", "commercials");
        						commercials.linkedCommercials[0].title = "Quince Presentation p1";
        					 
    • showBookmarks

      Type:
      bool
      Default:
      true

      Gets/Sets whether to show commercial locations or not.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						commercials: {
      							showBookmarks: false
      						}
      					});
      
      					//Get
      					var commercials = $(".selector").igVideoPlayer("option", "commercials");
      					var showBookmarks = commercials.linkedCommercials.showBookmarks;
      
      					//Set
      					var commercials = $(".selector").igVideoPlayer("option", "commercials");
      					commercials.linkedCommercials.showBookmarks = false;
      				 
  • fullscreen

    Type:
    bool
    Default:
    false

    Gets/Sets whether the video player to be in full screen or not. This is not a pure full screen, because browsers do not allow that. It just sets 100% width and height to the control.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					fullscreen:true
    				});
    
    				//Get
    				var fullScreen = $(".selector").igVideoPlayer("option", "fullscreen");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "fullscreen", true);
    			 
  • height

    Type:
    enumeration
    Default:
    null

    Gets/Sets the height of the control. By default null will stretch the control to fit data, if no other heights are defined.

    Code Sample

     
    					//Initialize
    					$(".selector").igVideoPlayer({
    						width: 600,
    						height: 400
    					});
    					//Get
    					var height = $(".selector").igVideoPlayer("option", "height");
    					//Set
    					$(".selector").igVideoPlayer("option", "height", 450);
    				 
  • language
    Inherited

    Type:
    string
    Default:
    "en"

    Set/Get the locale language setting for the widget.

    Code Sample

     
    					//Initialize
    				$(".selector").igVideoPlayer({
    					language: "ja"
    				});
    
    				// Get
    				var language = $(".selector").igVideoPlayer("option", "language");
    
    				// Set
    				$(".selector").igVideoPlayer("option", "language", "ja");
    			 
  • locale

    Type:
    object
    Default:
    {}

    • adMessage

      Type:
      bool
      Default:
      ""

      Gets/Sets ad message text.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							adMessage: 'Ad: Video will resume in $duration$ seconds.'
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").adMessage;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { buffering: 'Ad: Video will resume in $duration$ seconds.'});
      				 
    • adMessageLong

      Type:
      bool
      Default:
      ""

      Gets/Sets long ad message text.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							adMessageLong: 'Ad: Video will resume in $duration$.'
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").adMessageLong;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { adMessageLong: 'Ad: Video will resume in $duration$.'});
      				 
    • adMessageNoDuration

      Type:
      bool
      Default:
      ""

      Gets/Sets ad message text when no duration is specified.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							adMessageNoDuration: 'Ad: Video will resume after the commercial.'
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").adMessageNoDuration;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { adMessageNoDuration: 'Ad: Video will resume after the commercial.'});
      				 
    • adNewWindowTip

      Type:
      bool
      Default:
      ""

      Gets/Sets new ad window title.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							adNewWindowTip: 'Ad: Click to open ad content in a new window.'
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").adNewWindowTip;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { adNewWindowTip: 'Ad: Click to open ad content in a new window.'});
      				 
    • buffering

      Type:
      bool
      Default:
      ""

      Gets/Sets buffering label text.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							buffering: "Buffering"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").buffering;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { buffering: "Buffering"});
      				 
    • enterFullscreen

      Type:
      bool
      Default:
      ""

      Gets/Sets enter fullscreen button title.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							enterFullscreen: "Go Fullscreen"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").enterFullscreen;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { enterFullscreen: "Go Fullscreen"});
      				 
    • exitFullscreen

      Type:
      bool
      Default:
      ""

      Gets/Sets exit fullscreen button title.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							exitFullscreen: "Exit Fullscreen"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").exitFullscreen;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { exitFullscreen: "Exit Fullscreen"});
      				 
    • live

      Type:
      bool
      Default:
      ""

      Gets/Sets live video title.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							live: "Live"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").live;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { live: "Live" });
      				 
    • liveStream

      Type:
      bool
      Default:
      ""

      Gets/Sets live stream video title.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							liveStream: "Live video"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").liveStream;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { liveStream: "Live video" });
      				 
    • paused

      Type:
      bool
      Default:
      ""

      Gets/Sets paused button title.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							paused: "Paused"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").paused;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { paused: "Paused" });
      				 
    • play

      Type:
      bool
      Default:
      ""

      Gets/Sets play button title.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							play: "Play"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").play;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { play: "Playing" });
      				 
    • playing

      Type:
      bool
      Default:
      ""

      Gets/Sets playing button title.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							playing: "Playing"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").playing;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { playing: "Playing" });
      				 
    • progressLabelLongFormat

      Type:
      bool
      Default:
      ""

      Gets/Sets progress label long format.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							progressLabelLongFormat: "$currentTime$ / $duration$"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").progressLabelLongFormat;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { progressLabelLongFormat: "$currentTime$ / $duration$" });
      				 
    • progressLabelShortFormat

      Type:
      bool
      Default:
      ""

      Gets/Sets progress label short format.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							progressLabelShortFormat: "$currentTime$"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").progressLabelShortFormat;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { progressLabelShortFormat: "$currentTime$" });
      				 
    • relatedVideos

      Type:
      bool
      Default:
      ""

      Gets/Sets related videos text.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							relatedVideos: 'RELATED VIDEOS'
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").relatedVideos;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { relatedVideos: 'RELATED VIDEOS'});
      				 
    • replayButton

      Type:
      bool
      Default:
      ""

      Gets/Sets replay button text.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							replayButton: 'Replay'
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").replayButton;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { replayButton: 'Replay'});
      				 
    • replayTooltip

      Type:
      bool
      Default:
      ""

      Gets/Sets replay button tooltip.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							replayTooltip: 'Replay'
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").replayTooltip;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { replayTooltip: 'Replay'});
      				 
    • skipTo

      Type:
      bool
      Default:
      ""

      Gets/Sets skip to button title.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							skipTo: "skip to"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").skipTo;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { skipTo: "skip to"});
      				 
    • volume

      Type:
      bool
      Default:
      ""

      Gets/Sets volume button title.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						locale: {
      							volume: "Volume"
      						}
      					});
      
      					//Get
      					var text = $(".selector").igVideoPlayer("option", "locale").volume;
      
      					//Set
      					$(".selector").igVideoPlayer("option", "locale", { volume: "Volume" });
      				 
  • loop

    Type:
    bool
    Default:
    false

    Gets/Sets whether the video to start again after it has ended.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					loop: true
    				});
    
    				//Get
    				var loop = $(".selector").igVideoPlayer("option", "loop");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "loop", true);
    			 
  • muted

    Type:
    bool
    Default:
    false

    Gets/Sets whether the video volume is muted.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					muted: true
    				});
    
    				//Get
    				var muted = $(".selector").igVideoPlayer("option", "muted");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "muted", true);
    			 
  • posterUrl

    Type:
    string
    Default:
    ""

    Gets/Sets a URL to an image to show, when no video data is available.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					posterUrl: "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png"
    				});
    
    				//Get
    				var url = $(".selector").igVideoPlayer("option", "posterUrl");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "posterUrl", "http://www.igniteui.com/images/samples/video-player/quince-intro-1.png");
    			 
  • preload

    Type:
    bool
    Default:
    false

    Gets/Sets whether to preload load initial data for duration of video. If true it may start buffering the video, but this highly depends on the specific browser implementation.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					preload: true
    				});
    
    				//Get
    				var preload = $(".selector").igVideoPlayer("option", "preload");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "preload", true);
    			 
  • progressLabelFormat

    Type:
    string
    Default:
    "${currentTime} / ${duration}"

    Gets/Sets the format of the video progress label. You should use ${currentTime} to represent current playback position and ${duration} to represent video duration.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					progressLabelFormat:"Time=${currentTime} / Total=${duration}"
    				});
    
    				//Get
    				var labelFormat = $(".selector").igVideoPlayer("option", "progressLabelFormat");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "progressLabelFormat", "Time=${currentTime} / Total=${duration}");
    			 
  • regional
    Inherited

    Type:
    enumeration
    Default:
    en-US

    Set/Get the regional setting for the widget.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					regional: "ja"
    				});
    				// Get
    				var regional = $(".selector").igVideoPlayer("option", "regional");
    				// Set
    				$(".selector").igVideoPlayer("option", "regional", "ja");
    			 
  • relatedVideos

    Type:
    array
    Default:
    []
    Elements Type:
    object

    Gets/Sets an array of related videos that will be displayed when video playback has ended.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					relatedVideos: [
    						{
    							imageUrl: "http://www.soundbg.com/uploads/articles/d2b3270a_th.jpg",
    							title: "Some cool skype video.",
    							width: "80px",
    							height: "80px",
    							sources: ["http://medias.jilion.com/sublimevideo/dartmoor.mov",
    							"http://medias.jilion.com/sublimevideo/dartmoor.mp4",
    							"http://medias.jilion.com/sublimevideo/dartmoor.webm",
    							"http://medias.jilion.com/sublimevideo/dartmoor.ogv"
    							]
    						},
    						{
    							imageUrl: "http://tweetmeme.s3.amazonaws.com/thumbs/375968078.jpg",
    							title: "Bick buck bunny.",
    							width: "80px",
    							height: "80px",
    							sources: ["http://snapshot.opera.com/resources/BigBuckBunny.ogv",
    							"http://snapshot.opera.com/resources/BigBuckBunny.mp4",
    							"http://snapshot.opera.com/resources/BigBuckBunny.webm"
    							]
    						}
    					]
    				});
    
    				//Get
    				var relatedVids = $(".selector").igVideoPlayer("option", "relatedVideos");
    
    				//Set
    				var relatedVids = [
    					{
    							imageUrl: "http://www.soundbg.com/uploads/articles/d2b3270a_th.jpg",
    							title: "Some cool skype video.",
    							width: "80px",
    							height: "80px",
    							sources: ["http://medias.jilion.com/sublimevideo/dartmoor.mov",
    							"http://medias.jilion.com/sublimevideo/dartmoor.mp4",
    							"http://medias.jilion.com/sublimevideo/dartmoor.webm",
    							"http://medias.jilion.com/sublimevideo/dartmoor.ogv"
    							]
    					}
    				];
    
    				$(".selector").igVideoPlayer("option", "relatedVideos", relatedVids);
    			 
    • css

      Type:
      string
      Default:
      null

      Gets/Sets custom CSS class to be applied on the related video element.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						relatedVideos: [
      							{
      								imageUrl: "http://www.soundbg.com/uploads/articles/d2b3270a_th.jpg",
      								title: "Some cool skype video.",
      								width: "80px",
      								height: "80px",
      								css: "relatedVideosCss",
      								sources: ["http://medias.jilion.com/sublimevideo/dartmoor.mov",
      								"http://medias.jilion.com/sublimevideo/dartmoor.mp4",
      								"http://medias.jilion.com/sublimevideo/dartmoor.webm",
      								"http://medias.jilion.com/sublimevideo/dartmoor.ogv"
      								]
      							}
      						]
      					});
      				 
    • height

      Type:
      number
      Default:
      null

      Gets/Sets the height of the related video image.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						relatedVideos: [
      							{
      								imageUrl: "http://www.soundbg.com/uploads/articles/d2b3270a_th.jpg",
      								title: "Some cool skype video.",
      								width: "80px",
      								height: "80px",
      								sources: ["http://medias.jilion.com/sublimevideo/dartmoor.mov",
      								"http://medias.jilion.com/sublimevideo/dartmoor.mp4",
      								"http://medias.jilion.com/sublimevideo/dartmoor.webm",
      								"http://medias.jilion.com/sublimevideo/dartmoor.ogv"
      								]
      							}
      						]
      					});
      				 
    • imageUrl

      Type:
      string
      Default:
      ""

      Gets/Sets the URL of the related video image.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						relatedVideos: [
      							{
      								imageUrl: "http://www.soundbg.com/uploads/articles/d2b3270a_th.jpg",
      								title: "Some cool skype video.",
      								width: "80px",
      								height: "80px",
      								sources: ["http://medias.jilion.com/sublimevideo/dartmoor.mov",
      								"http://medias.jilion.com/sublimevideo/dartmoor.mp4",
      								"http://medias.jilion.com/sublimevideo/dartmoor.webm",
      								"http://medias.jilion.com/sublimevideo/dartmoor.ogv"
      								]
      							}
      						]
      					});
      				 
    • link

      Type:
      string
      Default:
      ""

      Gets/Sets a link to a page that will play the related video. It will be opened in a new window. If there are sources also, the link property has a priority.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						relatedVideos: [
      							{
      								imageUrl: "http://www.soundbg.com/uploads/articles/d2b3270a_th.jpg",
      								title: "Some cool skype video.",
      								width: "80px",
      								height: "80px",
      								link: "http://medias.jilion.com/sublimevideo/dartmoor.mp4"
      							}
      						]
      					});
      				 
    • sources

      Type:
      array
      Default:
      []
      Elements Type:
      object

      Gets/Sets the sources of the related video.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						relatedVideos: [
      							{
      								imageUrl: "http://www.soundbg.com/uploads/articles/d2b3270a_th.jpg",
      								title: "Some cool skype video.",
      								width: "80px",
      								height: "80px",
      								sources: ["http://medias.jilion.com/sublimevideo/dartmoor.mov",
      								"http://medias.jilion.com/sublimevideo/dartmoor.mp4",
      								"http://medias.jilion.com/sublimevideo/dartmoor.webm",
      								"http://medias.jilion.com/sublimevideo/dartmoor.ogv"
      								]
      							}
      						]
      					});
      				 
    • title

      Type:
      string
      Default:
      ""

      Gets/Sets the title of the video.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						relatedVideos: [
      							{
      								imageUrl: "http://www.soundbg.com/uploads/articles/d2b3270a_th.jpg",
      								title: "Some cool skype video.",
      								width: "80px",
      								height: "80px",
      								sources: ["http://medias.jilion.com/sublimevideo/dartmoor.mov",
      								"http://medias.jilion.com/sublimevideo/dartmoor.mp4",
      								"http://medias.jilion.com/sublimevideo/dartmoor.webm",
      								"http://medias.jilion.com/sublimevideo/dartmoor.ogv"
      								]
      							}
      						]
      					});
      				 
    • width

      Type:
      number
      Default:
      null

      Gets/Sets the width of the related video image.

      Code Sample

       
      					//Initialize
      					$(".selector").igVideoPlayer({
      						relatedVideos: [
      							{
      								imageUrl: "http://www.soundbg.com/uploads/articles/d2b3270a_th.jpg",
      								title: "Some cool skype video.",
      								width: "80px",
      								height: "80px",
      								sources: ["http://medias.jilion.com/sublimevideo/dartmoor.mov",
      								"http://medias.jilion.com/sublimevideo/dartmoor.mp4",
      								"http://medias.jilion.com/sublimevideo/dartmoor.webm",
      								"http://medias.jilion.com/sublimevideo/dartmoor.ogv"
      								]
      							}
      						]
      					});
      				 
  • showSeekTime

    Type:
    bool
    Default:
    true

    Gets/Sets whether the control seek tool tip will be shown when hovering the video progress bar.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					showSeekTime: false
    				});
    
    				//Get
    				var showTime = $(".selector").igVideoPlayer("option", "showSeekTime");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "showSeekTime", false);
    			 
  • sources

    Type:
    array
    Default:
    []
    Elements Type:
    object

    Gets/Sets a list of video sources to choose from. Best coded/format is automatically detected by the control. Supported types are depending on the browser and could be one of the following mov, mp4, webm, ogg.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					sources: [
    						"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
    						"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
    						"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
    					]
    				});
    
    				//Get
    				var sources = $(".selector").igVideoPlayer("option", "sources");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "sources", ["http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
    					"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
    					"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv" ]);
    			 
  • title

    Type:
    string
    Default:
    ""

    Gets/Sets video title.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    						title: "Ignite UI"
    				});
    
    				//Get
    				var title = $(".selector").igVideoPlayer("option", "title");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "title", "Ignite UI");
    			 
  • volume

    Type:
    number
    Default:
    0.5

    Gets/Sets the video volume. It can be between 0.0 and 1.0.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    						volume: 0.3
    				});
    
    				//Get
    				var volLevel = $(".selector").igVideoPlayer("option", "volume");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "volume", 0.3);
    			 
  • volumeAutohideDelay

    Type:
    number
    Default:
    1000

    Gets/Sets volume slider auto hide delay. This is applicable only when Infragistics playback controls are used.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    						volumeAutohideDelay: 1500
    				});
    
    				//Get
    				var delay = $(".selector").igVideoPlayer("option", "volumeAutohideDelay");
    
    				//Set
    				$(".selector").igVideoPlayer("option", "volumeAutohideDelay", 1500);
    			 
  • width

    Type:
    enumeration
    Default:
    null

    Gets/Sets the width of the control. By default null will stretch the control to fit data, if no other widths are defined.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					width: 600,
    					height: 400
    				});
    				//Get
    				var width = $(".selector").igVideoPlayer("option", "width");
    				//Set
    				$(".selector").igVideoPlayer("option", "width", 600);
    			 

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details
  • bannerClick

    Cancellable:
    false

    Occurs when the banner is clicked.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • bannerElement
          Type: Object

          Get the banner html element in the DOM.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerbannerclick", ".selector", function (evt, ui) {
    					//return the clicked banner element
    					ui.bannerElement;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					bannerClick: function (evt, ui) {...}
    				});
    			 
  • bannerHidden

    Cancellable:
    true

    Occurs when the banner is hidden.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • banner
          Type: Object

          Get the banner object from the banners array.

        • bannerElement
          Type: Object

          Get the banner html element in the DOM.

        • index
          Type: Number

          Get the banner index in the banners array.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerbannerhidden", ".selector", function (evt, ui) {
    					//return the banner object from the banners array
    					ui.banner;
    					//return the banner html element in the DOM
    					ui.bannerElement;
    					//return the banner index in the banners array
    					ui.index;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					bannerHidden: function (evt, ui) {...}
    				});
    			 
  • bannerVisible

    Cancellable:
    true

    Defines the name of the player banner visible event. Fired when the banner has been displayed.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • banner
          Type: Object

          Get the banner object from the banners array.

        • bannerElement
          Type: Object

          Get the banner html element in the DOM.

        • index
          Type: Number

          Get the banner index in the banners array.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerbannervisible", ".selector", function (evt, ui) {
    					//return the banner object from the banners array
    					ui.banner;
    					//return the banner html element in the DOM
    					ui.bannerElement;
    					//return the banner index in the banners array
    					ui.index;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					bannerVisible: function (evt, ui) {...}
    				});
    			 
  • bookmarkClick

    Cancellable:
    true

    Occurs when a bookmark is clicked.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • bookmark
          Type: Object

          Get a bookmark object from the bookmarks array.

        • bookmarkElement
          Type: Object

          Get the html element in the DOM.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerbookmarkclick", ".selector", function (evt, ui) {
    					//return a bookmark object from the bookmarks array
    					ui.bookmark;
    					//return the bookmark html element in the DOM
    					ui.bookmarkElement;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					bookmarkClick: function (evt, ui) {...}
    				});
    			 
  • bookmarkHit

    Cancellable:
    true

    Occurs when a bookmark is hit.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • bookmark
          Type: Object

          Get the bookmark object from the bookmarks array.

        • bookmarkElement
          Type: Object

          Get the html element in the DOM.

        • source
          Type: String

          Get the url of the playing video.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerbookmarkhit", ".selector", function (evt, ui) {
    					//return the bookmark object from the bookmarks array
    					ui.bookmark;
    					//return bookmark html element in the DOM
    					ui.bookmarkElement;
    					//return the url of the playing video (the one that is used from the sources array)
    					ui.source;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					bookmarkHit: function (evt, ui) {...}
    				});
    			 
  • browserNotSupported

    Cancellable:
    false

    Occurs when browser does not support HTML 5 video.

    Code Sample

     
    				//Initialize
    				$(".selector").igVideoPlayer({
    					browserNotSupported: function (evt, ui) {...}
    				});
    			 
  • buffering

    Cancellable:
    true

    Occurs when a chunk of data is buffered.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • buffered
          Type: Number

          Get buffered percentage.

        • source
          Type: String

          Get the url of the playing video.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerbuffering", ".selector", function (evt, ui) {
    					//return the buffering precentage
    					ui.buffered;
    					//return the url of the playing video (the one that is used from the sources array)
    					ui.source;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					buffering: function (evt, ui) {...}
    				});
    			 
  • ended

    Cancellable:
    true

    Occurs when the video has ended.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • duration
          Type: Number

          Get the video duration in seconds.

        • source
          Type: String

          Get the url of the playing video.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerended", ".selector", function (evt, ui) {
    					//return the duration of the video in seconds
    					ui.duration;
    					//return the url of the playing video (the one that is used from the sources array)
    					ui.source;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					ended: function (evt, ui) {...}
    				});
    			 
  • enterFullScreen

    Cancellable:
    true

    Occurs when igVideoPlayer enters full screen mode.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • source
          Type: String

          Get the url of the playing video.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerenterfullscreen", ".selector", function (evt, ui) {
    					//return the url of the playing video (the one that is used from the sources array)
    					ui.source;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					enterFullScreen: function (evt, ui) {...}
    				});
    			 
  • exitFullScreen

    Cancellable:
    true

    Occurs when igVideoPlayer exits full screen mode.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • source
          Type: String

          Get the url of the playing video.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerexitfullscreen", ".selector", function (evt, ui) {
    					//return the url of the playing video (the one that is used from the sources array)
    					ui.source;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					exitFullScreen: function (evt, ui) {...}
    				});
    			 
  • paused

    Cancellable:
    true

    Occurs when the video is paused.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • currentTime
          Type: Number

          Get the current time in the video at which the event was fired.

        • duration
          Type: Number

          Get the video duration in seconds.

        • source
          Type: String

          Get the url of the playing video.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerpaused", ".selector", function (evt, ui) {
    					//return the ellapsed time
    					ui.currentTime;
    					//return the duration of the video
    					ui.duration;
    					//return the url of the playing video (the one that is used from the sources array)
    					ui.source;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					paused: function (evt, ui) {...}
    				});
    			 
  • playing

    Cancellable:
    true

    Occurs when video gets playing.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • currentTime
          Type: Number

          Get the current time in the video at which the event was fired.

        • duration
          Type: Number

          Get the video duration in seconds.

        • source
          Type: String

          Get the url of the playing video.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerplaying", ".selector", function (evt, ui) {
    					//return the ellapsed time
    					ui.currentTime;
    					//return the duration of the video
    					ui.duration;
    					//return the url of the playing video (the one that is used from the sources array)
    					ui.source;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					playing: function (evt, ui) {...}
    				});
    			 
  • progress

    Cancellable:
    true

    Occurs when the video has advanced the playback position.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • currentTime
          Type: Number

          Get the current time in the video at which the event was fired.

        • duration
          Type: Number

          Get the video duration in seconds.

        • source
          Type: String

          Get the url of the playing video.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerprogress", ".selector", function (evt, ui) {
    					//return the current time(current position) in the video at which the event was fired
    					ui.currentTime;
    					//return the duration of the video
    					ui.duration;
    					//return the url of the playing video (the one that is used from the sources array)
    					ui.source;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					progress: function (evt, ui) {...}
    				});
    			 
  • relatedVideoClick

    Cancellable:
    true

    Occurs when a related video is clicked.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • relatedVideo
          Type: Object

          Get the relatedVideo object from the relatedVideos array.

        • relatedVideoElement
          Type: Object

          Get the relatedVideo html element in the DOM.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerrelatedvideoclick", ".selector", function (evt, ui) {
    					//return the relatedVideo object from the relatedVideos array
    					ui.relatedVideo;
    					//return relatedVideo html element in the DOM
    					ui.relatedVideoElement;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					relatedVideoClick: function (evt, ui) {...}
    				});
    			 
  • waiting

    Cancellable:
    true

    Occurs when igVideoPlayer is waiting for data from the server.

    Function takes arguments evt and ui.

    • ui
      Type: Object

        • currentTime
          Type: Number

          Get the current time in the video at which the event was fired.

        • duration
          Type: Number

          Get the video duration in seconds.

        • source
          Type: String

          Get the url of the playing video.

    Code Sample

     
    				//Bind after initialization
    				$(document).on("igvideoplayerwaiting", ".selector", function (evt, ui) {
    					//return the current time(current position) in the video at which the event was fired
    					ui.currentTime;
    					//return the duration of the video
    					ui.duration;
    					//return the url of the playing video (the one that is used from the sources array)
    					ui.source;
    				});
    
    				//Initialize
    				$(".selector").igVideoPlayer({
    					waiting: function (evt, ui) {...}
    				});
    			 
  • changeGlobalLanguage
    Inherited

    .igVideoPlayer( "changeGlobalLanguage" );

    Changes the widget language to global language. Global language is the value in $.ig.util.language.

    Code Sample

     
    				$(".selector").igVideoPlayer("changeGlobalLanguage");
    			 
  • changeGlobalRegional
    Inherited

    .igVideoPlayer( "changeGlobalRegional" );

    Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.

    Code Sample

     
    				$(".selector").igVideoPlayer("changeGlobalRegional");
    			 
  • changeLocale

    .igVideoPlayer( "changeLocale" );

    Changes the all locales into the widget element to the language specified in options.language
    Note that this method is for rare scenarios, use language or locale option setter.

    Code Sample

     
    				$(".selector").igVideoPlayer("changeLocale");
    			 
  • currentTime

    .igVideoPlayer( "currentTime", val:number );
    Return Type:
    number
    Return Type Description:
    Returns the current playback position.

    Gets/Sets the current time of the playing video.

    • val
    • Type:number
    • Specify the playback position in seconds to navigate to.

    Code Sample

     
    				//Get
    				var currentTime = $(".selector").igVideoPlayer("currentTime");
    
    				//Set
    				$(".selector").igVideoPlayer("currentTime", 60);
    			 
  • destroy

    .igVideoPlayer( "destroy" );

    Destroys the widget.

    Code Sample

     
    				$(".selector").igVideoPlayer("destroy");
    			 
  • duration

    .igVideoPlayer( "duration" );
    Return Type:
    number

    Get the current duration of the played video. It may be NaN if duration is still not loaded or the video is a live stream.

    Code Sample

     
    			var duration = $(".selector").igVideoPlayer("duration");
    			 
  • ended

    .igVideoPlayer( "ended" );
    Return Type:
    bool

    Get whether the current played video has ended.

    Code Sample

     
    			   var hasEnded = $(".selector").igVideoPlayer("ended");
    			    
  • hideAdMessage

    .igVideoPlayer( "hideAdMessage" );

    Hide the add message if shown.

    Code Sample

     
    			$(".selector").igVideoPlayer("hideAdMessage");
    			 
  • hideBanner

    .igVideoPlayer( "hideBanner", index:number );

    Hide the ad banner, if there is such.

    • index
    • Type:number
    • Specify the index of the banner from the banners array.

    Code Sample

     
    			$(".selector").igVideoPlayer("hideBanner", 1);
    			 
  • pause

    .igVideoPlayer( "pause" );

    Pause the currently playing video if any.

    Code Sample

     
    			$(".selector").igVideoPlayer("pause");
    			 
  • paused

    .igVideoPlayer( "paused" );
    Return Type:
    bool

    Returns whether the currently played video is paused.

    Code Sample

     
    			var isPaused = $(".selector").igVideoPlayer("paused");
    			 
  • play

    .igVideoPlayer( "play" );

    Start playing current loaded video if any.

    Code Sample

     
    			$(".selector").igVideoPlayer("play");
    			 
  • playCommercial

    .igVideoPlayer( "playCommercial", commercial:object );

    Play a linked commercial for this video.

    • commercial
    • Type:object
    • Specify the linked commercial to play.

    Code Sample

     
    				var commercial = {
    					sources: [
    					"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
    					"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
    					"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
    				],
    					startTime: 20,
    					title: "Quince Presentation p1",
    					link: "http://quince.infragistics.com/"
    				};
    
    				$(".selector").igVideoPlayer("playCommercial", commercial);
    			 
  • resetCommercialsShow

    .igVideoPlayer( "resetCommercialsShow" );

    Resets the commercials, to be shown again.

    Code Sample

     
    			$(".selector").igVideoPlayer("resetCommercialsShow");
    			 
  • screenshot

    .igVideoPlayer( "screenshot", [scaleFactor:number] );

    Get a screenshot of the current video frame. It returns a canvas object that you can position and show on the page. This depends on the browser support for canvas.

    • scaleFactor
    • Type:number
    • Optional
    • Specify scale factor between 0 and 1.

    Code Sample

     
    			   var screen = $(".selector").igVideoPlayer("screenshot");
    			    
  • seeking

    .igVideoPlayer( "seeking" );
    Return Type:
    bool

    Get whether the player is seeking to find the new playback position specified.

    Code Sample

     
    			var seeking = $(".selector").igVideoPlayer("seeking");
    			 
  • showBanner

    .igVideoPlayer( "showBanner", index:number );

    Shows the ad banner, if there is such.

    • index
    • Type:number
    • Specify the index of the banner from the banners array.

    Code Sample

     
    			$(".selector").igVideoPlayer("showBanner", 1);
    			 
  • supportsH264BaselineVideo

    .igVideoPlayer( "supportsH264BaselineVideo" );
    Return Type:
    bool

    Get whether the current browser supports H.264 codec.

    Code Sample

     
    			var isSuppored = $(".selector").igVideoPlayer("supportsH264BaselineVideo");
    			 
  • supportsOggTheoraVideo

    .igVideoPlayer( "supportsOggTheoraVideo" );
    Return Type:
    bool

    Get whether the current browser supports Theora codec.

    Code Sample

     
    			var isSuppored = $(".selector").igVideoPlayer("supportsOggTheoraVideo");
    			 
  • supportsVideo

    .igVideoPlayer( "supportsVideo" );
    Return Type:
    bool

    Get whether the current browser supports video tag.

    Code Sample

     
    			var isSuppored = $(".selector").igVideoPlayer("supportsVideo");
    			 
  • supportsWebmVideo

    .igVideoPlayer( "supportsWebmVideo" );
    Return Type:
    bool

    Get whether the current browser supports WEBM codec.

    Code Sample

     
    			var isSuppored = $(".selector").igVideoPlayer("supportsWebmVideo");
    			 
  • togglePlay

    .igVideoPlayer( "togglePlay" );

    Toggle control play state. If video is playing it will pause, if video is paused it will play.

    Code Sample

     
    			$(".selector").igVideoPlayer("togglePlay");
    			 
  • widget

    .igVideoPlayer( "widget" );

    Returns the element on which the widget was instantiated.

    Code Sample

     
    			var videoPlayer = $(".selector").igVideoPlayer("widget");
    			 
  • ui-igplayer-active-video

    Gets/Sets the css class applied on the main video when the control is activated.
  • ui-igplayer-ad-bookmark

    Gets/Sets the css class applied on an embedded commercial bookmark.
  • ui-igplayer-ad-msg

    Gets/Sets the css class applied on the resume video message span.
  • ui-igplayer-ad-msg-close

    Gets/Sets the css class applied on the resume video message close button.
  • ui-icon-close

    Gets/Sets the css class applied on the resume video message close button icon.
  • ui-igplayer-ad-msg-container

    Gets/Sets the css class applied on the resume video message container.
  • ui-igplayer-banner ui-corner-all

    Gets/Sets the css class applied on the banner container div.
  • ui-igplayer-banner-close

    Gets/Sets the css class applied on the banner close button.
  • ui-icon-close

    Gets/Sets the css class applied on the banner close icon.
  • ui-igplayer-banner-container

    Gets/Sets the css class applied on the banner container div.
  • ui-widget ui-igplayer

    Gets/Sets the widget base CSS classes.
  • ui-igplayer-bookmark-active-item

    Gets/Sets the css class showing the active bookmark item in the bookmark area.
  • ui-widget ui-igplayer-bookmark-container

    Gets/Sets the css class applied on the bookmark container DIV.
  • ui-widget-header ui-igplayer-bookmark-header

    Gets/Sets the css class applied on the bookmark header container.
  • ui-igplayer-bookmark-item-disabled

    Gets/Sets the css class applied on the bookmark list item when the item in the bookmark area is disabled.
  • ui-igplayer-bookmark-item-time

    Gets/Sets the css class applied on the bookmark list item showing the time in the bookmark area.
  • ui-igplayer-bookmark-item-title

    Gets/Sets the css class applied on the bookmark list item showing the title in the bookmark area.
  • ui-widget-content ui-igplayer-bookmark-list

    Gets/Sets the css class applied on the bookmark list in the bookmark area.
  • ui-igplayer-centerplaybutton-pause

    Gets/Sets the css class applied on the center pause button.
  • ui-igplayer-centerplaybutton-play

    Gets/Sets the css class applied on the center play button.
  • ui-igplayer-centerplaybutton-icon

    Gets/Sets the css class applied on the center play button icon.
  • ui-widget-header ui-igplayer-controls

    Gets/Sets the player controls CSS classes.
  • ui-igplayer-controls-hide

    Gets/Sets the controls hide CSS class. Applied on controls auto hide.
  • ui-igplayer-fullscreen-button

    Gets/Sets the css class applied on the full screen button of the playback controls.
  • ui-icon ui-igbutton-icon ui-icon-arrow-4-diag

    Gets/Sets the css class applied on the full screen button icon.
  • ui-igplayer-linked-bookmark

    Gets/Sets the css class applied on the linked commercial bookmark.
  • ui-igplayer-playbutton

    Gets/Sets the css class applied on the play button of the playback controls.
  • ui-igplayer-progressbar ui-corner-all

    Gets/Sets the css class applied on the slider widget of the playback controls.
  • ui-igplayer-progresslabel

    Gets/Sets the css class applied on the progress label of the playback controls.
  • ui-igplayer-related-video-bar

    Gets/Sets the css class applied on the related videos bottom area containing the replay and fullscreen buttons.
  • ui-igplayer-related-video

    Gets/Sets the css class applied on a related video element.
  • ui-igplayer-related-video-first

    Gets/Sets the css class applied on the first related video element.
  • ui-igplayer-related-video-hover

    Gets/Sets the css class applied on a related video hover.
  • ui-igplayer-related-video-last

    Gets/Sets the css class applied on the last related video element.
  • ui-igplayer-related-video-replay

    Gets/Sets the css class applied on the replay button in the related videos area.
  • ui-icon-arrowrefresh-1-s

    Gets/Sets the css class applied on the replay button icon.
  • ui-igplayer-related-video-container

    Gets/Sets the css class applied on the related videos container class.
  • ui-igplayer-related-scroller-left

    Gets/Sets the css class applied on the left scroll button.
  • ui-icon-triangle-1-w

    Gets/Sets the class applied on the left scroll button icon.
  • ui-igplayer-related-list

    Gets/Sets the css class applied on the related videos list.
  • ui-igplayer-related-scroller-right

    Gets/Sets the css class applied on the right scroll button of the related videos.
  • ui-icon-triangle-1-e

    Gets/Sets the css class applied on the right icon of the scroll button.
  • ui-igplayer-related-video-header

    Gets/Sets the css class applied on the related videos header area.
  • ui-igplayer-related-video-outer-container

    Gets/Sets the css class applied on the related videos outer most container.
  • ui-igplayer-seektooltip

    Gets/Sets the css class applied on the seek tooltip.
  • ui-html5-non-html5-supported-message ui-helper-clearfix

    Gets/Sets the class applied on a span element, shown when the player is opened in a non HTML5 compatible browser.
  • ui-igplayer-not-supported-video-source

    Gets/Sets the css class applied on the anchor element shown when video sources are unsupported.
  • ui-igplayer-not-supported-video-source-icon

    Gets/Sets the css class applied on the anchor element showing the unsupported video source icon.
  • ui-igplayer-video

    Gets/Sets the class applied on main video element.
  • ui-igplayer-volumecontrol

    Gets/Sets the css class applied on the volume control button of the playback controls.
  • ui-igplayer-volumeslider

    Gets/Sets the css class applied on the volume slider of the playback controls.
  • ui-igplayer-waiting

    Gets/Sets the css class applied on the buffering indicator.
  • ui-igplayer-waiting-icon

    Gets/Sets the css class applied on the buffering indicator icon.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.