Ignite UI API Reference
ui.igVideoPlayer
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
Inherits
-
autohide
- Type:
- bool
- Default:
- true
Get or set 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
Get or set 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:
- object
- Default:
- []
Get or set an array of banner objects that will show the banners when the video clip is played.
Code Sample
//Initialize $(".selector").igVideoPlayer({ banners: [{ imageUrl: "../Content/images/Banner1.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: '../Content/images/Banner1.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
Get or set 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: "../Content/images/Banner1.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
Get or set whether to automatically hide the banner. If set to true, the banner is hidden after banner.hidedelay in milliseconds.
Code Sample
//Initialize $(".selector").igVideoPlayer({ banners: [{ imageUrl: "../Content/images/Banner1.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
Get or set whether the user will be able to close the banner or not.
Code Sample
//Initialize $(".selector").igVideoPlayer({ banners: [{ imageUrl: "../Content/images/Banner1.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
Get or set the banner specific css class, that will be applied on the banner grid.
Code Sample
//Initialize $(".selector").igVideoPlayer({ banners: [{ imageUrl: "../Content/images/Banner1.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
Get or set the banner animation duration.
Code Sample
//Initialize $(".selector").igVideoPlayer({ banners: [{ imageUrl: "../Content/images/Banner1.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:
- number
- Default:
- null
Get or set the banner height.
Code Sample
//Initialize $(".selector").igVideoPlayer({ banners: [{ imageUrl: "../Content/images/Banner1.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
Get or set 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: "../Content/images/Banner1.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:
- ""
Get or set the banner image url.
Code Sample
//Initialize $(".selector").igVideoPlayer({ banners: [{ imageUrl: "../Content/images/Banner1.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 = "../Content/images/Banner1.png";
-
link
- Type:
- string
- Default:
- null
Get or set the banner link that will open in new window.
Code Sample
//Initialize $(".selector").igVideoPlayer({ banners: [{ imageUrl: "../Content/images/Banner1.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:
- number
- Default:
- []
Get or set an array of numbers. Each number specifies on which second in the movie the banner will pop.
Code Sample
//Initialize $(".selector").igVideoPlayer({ banners: [{ imageUrl: "../Content/images/Banner1.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
Get or set whether the banner is visible or not.
Code Sample
//Initialize $(".selector").igVideoPlayer({ banners: [{ imageUrl: "../Content/images/Banner1.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:
- number
- Default:
- null
Get or set the banner width.
Code Sample
//Initialize $(".selector").igVideoPlayer({ banners: [{ imageUrl: "../Content/images/Banner1.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:
- object
- Default:
- []
Get or set 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
Get or set 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
Get or set 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:
- ""
Get or set 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
Get or set 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.
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
Get or set 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:
- {}
Get or set an array of commercials objects that will be displayed when the video is playing.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { linkedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_1.theora.ogv" ], startTime: 20, title: "Quince Presentation p1", link: "http://quince.infragistics.com/" }, { sources: [ "videos/QuinceIntro_Part3_1.h264.mp4", "videos/QuinceIntro_Part3_1.webmvp8.webm", "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_1.h264.mp4", "http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.webmvp8.webm", "http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_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: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_1.theora.ogv" ], startTime: 20, title: "Quince Presentation p1", link: "http://quince.infragistics.com/" }, { sources: [ "videos/QuinceIntro_Part3_1.h264.mp4", "videos/QuinceIntro_Part3_1.webmvp8.webm", "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
Get or set whether to apply an animation effect when showing or hiding the ad message. If set to true, the animation is played for commercial.adMessage.animationDuration in milliseconds.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { linkedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_1.theora.ogv" ], startTime: 20, title: "Quince Presentation p1", link: "http://quince.infragistics.com/" }, { sources: [ "videos/QuinceIntro_Part3_1.h264.mp4", "videos/QuinceIntro_Part3_1.webmvp8.webm", "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
Get or set the ad message animation duration of the commercial.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { linkedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_1.theora.ogv" ], startTime: 20, title: "Quince Presentation p1", link: "http://quince.infragistics.com/" }, { sources: [ "videos/QuinceIntro_Part3_1.h264.mp4", "videos/QuinceIntro_Part3_1.webmvp8.webm", "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
Get or set the ad message auto hide of the commercial.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { linkedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_1.theora.ogv" ], startTime: 20, title: "Quince Presentation p1", link: "http://quince.infragistics.com/" }, { sources: [ "videos/QuinceIntro_Part3_1.h264.mp4", "videos/QuinceIntro_Part3_1.webmvp8.webm", "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
Get or set the ad message hide delay.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { linkedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_1.theora.ogv" ], startTime: 20, title: "Quince Presentation p1", link: "http://quince.infragistics.com/" }, { sources: [ "videos/QuinceIntro_Part3_1.h264.mp4", "videos/QuinceIntro_Part3_1.webmvp8.webm", "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
Get or set 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:
- object
- Default:
- []
Get or set 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: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_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: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_1.theora.ogv" ], startTime: 20, endTime: 30, title: "Quince Presentation p1", link: "http://quince.infragistics.com/" } ]; commercials.embeddedCommercials = embeddedCommercials;
-
endTime
- Type:
- number
- Default:
- 30
Get or set the end second of the embedded commercial.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { embeddedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_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:
- ""
Get or set the sponsored link of the embedded commercial.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { embeddedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_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
Get or set the start second of the embedded commercial.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { embeddedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_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:
- ""
Get or set the tooltip for the bookmark of the embedded commercial.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { embeddedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_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:
- object
- Default:
- []
Get or set 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 the startTime property. This feature is useful if you have frequently changing outside commercial sources.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { linkedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_1.theora.ogv" ], startTime: 20, title: "Quince Presentation p1", link: "http://quince.infragistics.com/" }, { sources: [ "videos/QuinceIntro_Part3_1.h264.mp4", "videos/QuinceIntro_Part3_1.webmvp8.webm", "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: [ "videos/QuinceIntro_Part3_1.h264.mp4", "videos/QuinceIntro_Part3_1.webmvp8.webm", "videos/QuinceIntro_Part3_1.theora.ogv" ], startTime: 100, title: "Quince Presentation p3", link: "http://quince.infragistics.com/" } ]; commercials.linkedCommercials = linkedCommercials;
-
link
- Type:
- string
- Default:
- ""
Get or set the link to open on linked commercial click.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { linkedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_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:
- string
- Default:
- []
Get or set the sources of the linked commercial video.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { linkedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_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
Get or set the second in the video at which the linked commercial should play.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { linkedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_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:
- ""
Get or set the tooltip for the linked commercial bookmark.
Code Sample
//Initialize $(".selector").igVideoPlayer({ commercials: { linkedCommercials: [ { sources: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_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
Get or set 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
Get or set 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:
- number
- Default:
- null
Get or set 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);
-
loop
- Type:
- bool
- Default:
- false
Get or set 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
Get or set 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:
- ""
Get or set a URL to an image to show, when no video data is available.
Code Sample
//Initialize $(".selector").igVideoPlayer({ posterUrl: "../images/videoImage.png" }); //Get var url = $(".selector").igVideoPlayer("option", "posterUrl"); //Set $(".selector").igVideoPlayer("option", "posterUrl", "../images/videoImage.png");
-
preload
- Type:
- bool
- Default:
- false
Get or set 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}
Get or set 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}");
-
relatedVideos
- Type:
- object
- Default:
- []
Get or set 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
Get or set 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
Get or set 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:
- ""
Get or set 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:
- ""
Get or set 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:
- string
- Default:
- []
Get or set 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:
- ""
Get or set 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
Get or set 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
Get or set 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:
- string
- Default:
- []
Get or set 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: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_1.theora.ogv" ] }); //Get var sources = $(".selector").igVideoPlayer("option", "sources"); //Set $(".selector").igVideoPlayer("option", "sources", ["videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_1.theora.ogv" ]);
-
title
- Type:
- string
- Default:
- ""
Get or set 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
Get or set 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
Get or set 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:
- number
- Default:
- null
Get or set 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.
-
bannerClick
- Cancellable:
- false
Occurs when the banner is clicked.
Function takes arguments evt and ui.
Use ui.bannerElement to get the banner html element in the DOM.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerbannerclick", function (evt, ui) { //return the clicked banner element ui.bannerElement; }); //Initialize $(".selector").igVideoPlayer({ bannerClick: function (evt, ui) {...} });
-
bannerHidden
- Cancellable:
- false
Occurs when the banner is hidden.
Function takes arguments evt and ui.
Use ui.index to get the banner index in the banners array.
Use ui.banner to get the banner object from the banners array.
Use ui.bannerElement to get the banner html element in the DOM.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerbannerhidden", function (evt, ui) { //return the banner index in the banners array ui.index; //return the banner object from the banners array ui.banner; //return the banner html element in the DOM ui.bannerElement; }); //Initialize $(".selector").igVideoPlayer({ bannerHidden: function (evt, ui) {...} });
-
bannerVisible
- Cancellable:
- false
Defines the name of the player banner visible event. Fired when the banner has been displayed.
Function takes arguments evt and ui.
Use ui.index to get the banner index in the banners array.
Use ui.banner to get the banner object from the banners array.
Use ui.bannerElement to get the banner html element in the DOM.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerbannervisible", function (evt, ui) { //return the banner index in the banners array ui.index; //return the banner object from the banners array ui.banner; //return the banner html element in the DOM ui.bannerElement; }); //Initialize $(".selector").igVideoPlayer({ bannerVisible: function (evt, ui) {...} });
-
bookmarkClick
- Cancellable:
- false
Occurs when the bookmark is clicked.
Function takes arguments evt and ui.
Use ui.bookmark to get the bookmark object from the bookmarks array.
Use ui.bookmarkElement to get the html element in the DOM.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerbookmarkclick", function (evt, ui) { //return the bookmark object from the bookmarks array ui.bookmark; //return bookmark html element in the DOM ui.bookmarkElement; }); //Initialize $(".selector").igVideoPlayer({ bookmarkClick: function (evt, ui) {...} });
-
bookmarkHit
- Cancellable:
- false
Occurs when the bookmark is hit.
Function takes arguments evt and ui.
Use ui.source to get the url of the playing video.
Use ui.bookmark to get the bookmark object from the bookmarks array.
Use ui.bookmarkElement to get the html element in the DOM.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerbookmarkhit", function (evt, ui) { //return the url of the playing video (the one that is used from the sources array) ui.source; //return the bookmark object from the bookmarks array ui.bookmark; //return bookmark html element in the DOM ui.bookmarkElement; }); //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:
- false
Occurs when a chunk of data is buffered.
Function takes arguments evt and ui.
Use ui.source to get the url of the playing video.
Use ui.buffered to get buffered percentage.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerbuffering", function (evt, ui) { //return the url of the playing video (the one that is used from the sources array) ui.source; //return the buffering precentage ui.buffered; }); //Initialize $(".selector").igVideoPlayer({ buffering: function (evt, ui) {...} });
-
ended
- Cancellable:
- false
Occurs when video has ended.
Function takes arguments evt and ui.
Use ui.source to get the url of the playing video.
Use ui.duration to get the video duration in seconds.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerended", function (evt, ui) { //return the url of the playing video (the one that is used from the sources array) ui.source; //return the duration of the video in seconds ui.duration; }); //Initialize $(".selector").igVideoPlayer({ ended: function (evt, ui) {...} });
-
enterFullScreen
- Cancellable:
- true
Occurs when igVideoPlayer enters full screen mode.
Function takes arguments evt and ui.
Use ui.source to get the url of the playing video.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerenterfullscreen", 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.
Use ui.source to get the url of the playing video.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerexitfullscreen", 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:
- false
Occurs when video is paused.
Function takes arguments evt and ui.
Use ui.source to get the url of the playing video.
Use ui.duration to get the video duration in seconds.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerpaused", function (evt, ui) { //return the url of the playing video (the one that is used from the sources array) ui.source; //return the duration of the video ui.duration; }); //Initialize $(".selector").igVideoPlayer({ paused: function (evt, ui) {...} });
-
playing
- Cancellable:
- false
Occurs when video gets playing.
Function takes arguments evt and ui.
Use ui.source to get the url of the playing video.
Use ui.duration to get the video duration in seconds.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerplaying", function (evt, ui) { //return the url of the playing video (the one that is used from the sources array) ui.source; //return the duration of the video ui.duration; }); //Initialize $(".selector").igVideoPlayer({ playing: function (evt, ui) {...} });
-
progress
- Cancellable:
- false
Occurs when video has advanced the playback position.
Function takes arguments evt and ui.
Use ui.source to get the url of the playing video.
Use ui.currentTime to get current position in the video at which the event was fired.
Use ui.duration to get the video duration in seconds.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerprogress", function (evt, ui) { //return the url of the playing video (the one that is used from the sources array) ui.source; //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; }); //Initialize $(".selector").igVideoPlayer({ progress: function (evt, ui) {...} });
-
relatedVideoClick
- Cancellable:
- true
Occurs when related video is clicked.
Function takes arguments evt and ui.
Use ui.relatedVideo to get the relatedVideo object from the relatedVideos array.
Use ui.relatedVideoElement to get the relatedVideo html element in the DOM.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerrelatedvideoclick", 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:
- false
Occurs when igVideoPlayer is waiting for data from the server.
Function takes arguments evt and ui.
Use ui.source to get the url of the playing video.
Use ui.currentTime to get current position in the video at which the event was fired.
Use ui.duration to get the video duration in seconds.Code Sample
//Delegate $(document).delegate(".selector", "igvideoplayerwaiting", function (evt, ui) { //return the url of the playing video (the one that is used from the sources array) ui.source; //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; }); //Initialize $(".selector").igVideoPlayer({ waiting: function (evt, ui) {...} });
-
currentTime
- .igVideoPlayer( "currentTime", val:number );
- Return Type:
- number
- Return Type Description:
- Returns the current playback position.
Get or set 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
Get whether the current 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: [ "videos/QuinceIntro_1.h264.mp4", "videos/QuinceIntro_1.webmvp8.webm", "videos/QuinceIntro_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);
-
supports_h264_baseline_video
- .igVideoPlayer( "supports_h264_baseline_video" );
- Return Type:
- bool
Get whether the current browser supports H.264 codec.
Code Sample
var isSupported = $(".selector").igVideoPlayer("supports_h264_baseline_video");
-
supports_ogg_theora_video
- .igVideoPlayer( "supports_ogg_theora_video" );
- Return Type:
- bool
Get whether the current browser supports Theora codec.
Code Sample
var isSupported = $(".selector").igVideoPlayer("supports_ogg_theora_video");
-
supports_video
- .igVideoPlayer( "supports_video" );
- Return Type:
- bool
Get whether the current browser supports video tag.
Code Sample
var isSupported = $(".selector").igVideoPlayer("supports_video");
-
supports_webm_video
- .igVideoPlayer( "supports_webm_video" );
- Return Type:
- bool
Get whether the current browser supports WEBM codec.
Code Sample
var isSupported = $(".selector").igVideoPlayer("supports_webm_video");
-
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
- Get or set the css class applied on the main video when the control is activated.
-
ui-igplayer-ad-bookmark
- Get or set the css class applied on an embedded commercial bookmark.
-
ui-igplayer-ad-msg
- Get or set the css class applied on the resume video message span.
-
ui-igplayer-ad-msg-close
- Get or set the css class applied on the resume video message close button.
-
ui-icon-close
- Get or set the css class applied on the resume video message close button icon.
-
ui-igplayer-ad-msg-container
- Get or set the css class applied on the resume video message container.
-
ui-igplayer-banner ui-corner-all
- Get or set the css class applied on the banner container div.
-
ui-igplayer-banner-close
- Get or set the css class applied on the banner close button.
-
ui-icon-close
- Get or set the css class applied on the banner close icon.
-
ui-igplayer-banner-container
- Get or set the css class applied on the banner container div.
-
ui-widget ui-igplayer
- Get or set the widget base CSS classes.
-
ui-igplayer-bookmark-active-item
- Get or set the css class showing the active bookmark item in the bookmark area.
-
ui-widget ui-igplayer-bookmark-container
- Get or set the css class applied on the bookmark container DIV.
-
ui-widget-header ui-igplayer-bookmark-header
- Get or set the css class applied on the bookmark header container.
-
ui-igplayer-bookmark-item-disabled
- Get or set the css class applied on the bookmark list item when the item in the bookmark area is disabled.
-
ui-igplayer-bookmark-item-time
- Get or set the css class applied on the bookmark list item showing the time in the bookmark area.
-
ui-igplayer-bookmark-item-title
- Get or set the css class applied on the bookmark list item showing the title in the bookmark area.
-
ui-widget-content ui-igplayer-bookmark-list
- Get or set the css class applied on the bookmark list in the bookmark area.
-
ui-igplayer-centerplaybutton-pause
- Get or set the css class applied on the center pause button.
-
ui-igplayer-centerplaybutton-play
- Get or set the css class applied on the center play button.
-
ui-igplayer-centerplaybutton-icon
- Get or set the css class applied on the center play button icon.
-
ui-widget-header ui-igplayer-controls ui-igplayer-grid ui-igplayer-autohide ui-corner-all
- Get or set the player controls CSS classes.
-
ui-igplayer-controls-hide
- Get or set the controls hide CSS class. Applied on controls auto hide.
-
ui-igplayer-fullscreen-button
- Get or set the css class applied on the full screen button of the playback controls.
-
ui-icon ui-igbutton-icon ui-icon-arrow-4-diag
- Get or set the css class applied on the full screen button icon.
-
ui-igplayer-linked-bookmark
- Get or set the css class applied on the linked commercial bookmark.
-
ui-igplayer-playbutton
- Get or set the css class applied on the play button of the playback controls.
-
ui-igplayer-progressbar ui-corner-all
- Get or set the css class applied on the slider widget of the playback controls.
-
ui-igplayer-progresslabel
- Get or set the css class applied on the progress label of the playback controls.
-
ui-igplayer-related-video-bar
- Get or set the css class applied on the related videos bottom area containing the replay and fullscreen buttons.
-
ui-igplayer-related-video
- Get or set the css class applied on a related video element.
-
ui-igplayer-related-video-first
- Get or set the css class applied on the first related video element.
-
ui-igplayer-related-video-hover
- Get or set the css class applied on a related video hover.
-
ui-igplayer-related-video-last
- Get or set the css class applied on the last related video element.
-
ui-igplayer-related-video-replay
- Get or set the css class applied on the replay button in the related videos area.
-
ui-icon-arrowrefresh-1-s
- Get or set the css class applied on the replay button icon.
-
ui-igplayer-related-video-container
- Get or set the css class applied on the related videos container class.
-
ui-igplayer-related-scroller-left
- Get or set the css class applied on the left scroll button.
-
ui-icon-triangle-1-w
- Get or set the class applied on the left scroll button icon.
-
ui-igplayer-related-list
- Get or set the css class applied on the related videos list.
-
ui-igplayer-related-scroller-right
- Get or set the css class applied on the right scroll button of the related videos.
-
ui-icon-triangle-1-e
- Get or set the css class applied on the right icon of the scroll button.
-
ui-igplayer-related-video-header
- Get or set the css class applied on the related videos header area.
-
ui-igplayer-related-video-outer-container
- Get or set the css class applied on the related videos outer most container.
-
ui-igplayer-seektooltip
- Get or set the css class applied on the seek tooltip.
-
ui-html5-non-html5-supported-message ui-helper-clearfix
- Get or set 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
- Get or set the css class applied on the anchor element shown when video sources are unsupported.
-
ui-igplayer-not-supported-video-source-icon
- Get or set the css class applied on the anchor element showing the unsupported video source icon.
-
ui-igplayer-video
- Get or set the class applied on main video element.
-
ui-igplayer-volumecontrol
- Get or set the css class applied on the volume control button of the playback controls.
-
ui-igplayer-volumeslider
- Get or set the css class applied on the volume slider of the playback controls.
-
ui-igplayer-waiting
- Get or set the css class applied on the buffering indicator.
-
ui-igplayer-waiting-icon
- Get or set the css class applied on the buffering indicator icon.