ui.igVideoPlayer

ui.igVideoPlayer_image

VideoPlayer は、HTML 5 ビデオ を表示する jQuery UI ウィジェットで、どのブラウザーでも UI の一貫性を確保し、フルセットのプレーヤー コントロールをエンドユーザーに提供するものです。この API のクラス、オプション、イベント、メソッド、およびテーマの詳細については、上記の各関連タブをご覧ください。

次のサンプル コードは、igVideoPlayer コントロールの初期方法を示すものです。

この API を使用した作業方法の詳細についてはここをクリックしてください。igVideoPlayer コントロールの必要なスクリプトおよびテーマを参照する方法については、 「Ignite UI で JavaScript リソースを使用する」および Ignite UI のスタイル設定とテーマを参照してください。

コード サンプル

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

関連サンプル

関連トピック

依存関係

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

継承

  • autohide

    タイプ:
    bool
    デフォルト:
    true

    ビデオの上でマウスをホバーしていないときに、プレーヤー コントロールを自動的に隠すかどうかを取得または設定します。Infragistics 再生コントロールを使用する場合のみの設定です。

    コード サンプル

     
					//Initialize
					$(".selector").igVideoPlayer({
						autohide:true
						});

					//Get
					var hide = $(".selector").igVideoPlayer("option", "autohide");

					//Set
					$(".selector").igVideoPlayer("option", "autohide", true);

  • autoplay

    タイプ:
    bool
    デフォルト:
    false

    コントロールを読み込んだ後にビデオをすぐに再生するかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igVideoPlayer({
					autoplay:true
				});

				//Get
				var autoPlay = $(".selector").igVideoPlayer("option", "autoplay");

				//Set
				$(".selector").igVideoPlayer("option", "autoplay", true);

  • banners

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    ビデオ クリップが再生されるときにバナーを表示するバナー オブジェクトの配列を取得または設定します。

    コード サンプル

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

      タイプ:
      bool
      デフォルト:
      true

      バナーを表示/非表示するときにアニメーション結果を適用するかどうかを取得または設定します。true に設定する場合、アニメーションは banner.duration (ミリ秒) を再生します。

      コード サンプル

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

      タイプ:
      bool
      デフォルト:
      false

      バナーを自動的に非表示するかどうかを取得または設定します。true に設定する場合、バナーは hidedelay (ミリ秒) の後に非表示されます。

      コード サンプル

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

      タイプ:
      bool
      デフォルト:
      true

      ユーザーがバナーを閉じることができるかどうかを取得または設定します。

      コード サンプル

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

      タイプ:
      string
      デフォルト:
      null

      バナー グリッドに適用するバナー固有の css クラスを取得または設定します。

      コード サンプル

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

      タイプ:
      number
      デフォルト:
      1000

      バナー アニメーション期間を取得または設定します。

      コード サンプル

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

      タイプ:
      enumeration
      デフォルト:
      null

      コード サンプル

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

      タイプ:
      number
      デフォルト:
      10000

      バナーの autohide 遅延時間をミリ秒で取得または設定します。banner.autohide オプションが True に設定される場合のみに考慮されます。

      コード サンプル

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

      タイプ:
      string
      デフォルト:
      ""

      バナー画像の URL を取得または設定します。

      コード サンプル

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

      タイプ:
      string
      デフォルト:
      null

      新しいウィンドウに開くバナー リンクを取得または設定します。

      コード サンプル

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

      タイプ:
      array
      デフォルト:
      []
      要素タイプ:
      object

      数値の配列を取得または設定します。それぞれの数は、ムービーにバナーがポップする秒を指定します。

      コード サンプル

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

      タイプ:
      bool
      デフォルト:
      true

      バナーが表示されるかどうかを取得または設定します。

      コード サンプル

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

      タイプ:
      enumeration
      デフォルト:
      null

      コード サンプル

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

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    ビデオ プレーヤー コントロールに表示されるブックマークの配列を取得または設定します。

    コード サンプル

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

      タイプ:
      bool
      デフォルト:
      false

      ブックマークが無効かどうかを取得または設定します。

      コード サンプル

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

      タイプ:
      number
      デフォルト:
      0

      ブックマークの位置を取得または設定します。0 とムービーの期間 (秒単位) の間にある必要があります。

      コード サンプル

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

      タイプ:
      string
      デフォルト:
      ""

      ブックマークのタイトルを取得または設定します。ホバーするとツールチップとして表示されます。

      コード サンプル

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

    タイプ:
    bool
    デフォルト:
    false

    組み込みブラウザー コントロールを使用するかどうかを取得または設定します。デフォルトで、プレーヤーは Infragistics の再生コントロールを使用します。ただし、組み込みブラウザー コントロールを使用する場合、ブラウザーによってルック アンド フィールが異なることがあります。 このオプションが true に設定された場合、commercials がサポートされていないため、表示されません。

    コード サンプル

     
				//Initialize
				$(".selector").igVideoPlayer({
					browserControls: true
				});

				//Get
				var controls = $(".selector").igVideoPlayer("option", "browserControls");

				//Set
				$(".selector").igVideoPlayer("option", "browserControls", true);

  • centerButtonHideDelay

    タイプ:
    number
    デフォルト:
    1200

    大きなボタンを非表示にするまでの遅延時間を取得または設定します。

    コード サンプル

     
					//Initialize
					$(".selector").igVideoPlayer({
						centerButtonHideDelay:2400
					});

					//Get
					var delay = $(".selector").igVideoPlayer("option", "centerButtonHideDelay");

					//Set
					$(".selector").igVideoPlayer("option", "centerButtonHideDelay", 2400);

  • commercials

    タイプ:
    object
    デフォルト:
    {}

    ビデオが再生しているときに表示されるコマーシャル オブジェクトの配列を取得または設定します。 broswerControls がコマーシャルをサポートしないことに注意してください。

    コード サンプル

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

      タイプ:
      object
      デフォルト:
      {}

      コマーシャルの広告メッセージの設定をカスタマイズします。広告メッセージはコマーシャルの期間を表示し、コマーシャルの再生が開始したときに表示されます。

      コード サンプル

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

        タイプ:
        bool
        デフォルト:
        true

        広告メッセージを表示/非表示するときにアニメーション結果を適用するかどうかを取得または設定します。true に設定する場合、アニメーションは animationDuration (ミリ秒) を再生します。

        コード サンプル

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

        タイプ:
        number
        デフォルト:
        1000

        コマーシャルの広告メッセージのアニメーション期間を取得または設定します。

        コード サンプル

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

        タイプ:
        bool
        デフォルト:
        true

        コマーシャルの広告メッセージの自動非表示を取得または設定します。

        コード サンプル

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

        タイプ:
        number
        デフォルト:
        20000

        広告メッセージの非表示遅延時間を取得または設定します。

        コード サンプル

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

      タイプ:
      bool
      デフォルト:
      false

      繰り返しの再生でコマーシャルを再生するかどうかを取得または設定します。

      コード サンプル

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

      タイプ:
      array
      デフォルト:
      []
      要素タイプ:
      object

      埋め込んだコマーシャル オブジェクトの配列を取得または設定します。組み込みコマーシャルは、元のビデオファイルに含まれる広告です。ビデオのいくつかのセクションをコマーシャルとしてマークする場合に適しています。

      コード サンプル

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

        タイプ:
        number
        デフォルト:
        30

        埋め込んだコマーシャルの終了秒数を取得または設定します。

        コード サンプル

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

        タイプ:
        string
        デフォルト:
        ""

        埋め込んだコマーシャルのスポンサーされたリンクを取得または設定します。

        コード サンプル

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

        タイプ:
        number
        デフォルト:
        20

        埋め込んだコマーシャルの開始秒数を取得または設定します。

        コード サンプル

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

        タイプ:
        string
        デフォルト:
        ""

        埋め込んだコマーシャルのブックマークのツールチップを取得または設定します。

        コード サンプル

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

      タイプ:
      array
      デフォルト:
      []
      要素タイプ:
      object

      リンクされたコマーシャル オブジェクトの配列を取得または設定します。リンク コマーシャルは、startTime プロパティのムービー クリップの指定した場所で再生されるコマーシャル ビデオ ファイルです。この機能は、コマーシャル ソース以外を頻繁に変更する場合に便利な機能です。

      コード サンプル

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

        タイプ:
        string
        デフォルト:
        ""

        リンクされたコマーシャルをクリックしたときに開くリンクを取得または設定します。

        コード サンプル

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

        タイプ:
        array
        デフォルト:
        []
        要素タイプ:
        object

        リンクされたコマーシャル ビデオのソースを取得または設定します。

        コード サンプル

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

        タイプ:
        number
        デフォルト:
        10

        リンクされたビデオ内でコマーシャルを再生する必要がある秒を取得または設定します。

        コード サンプル

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

        タイプ:
        string
        デフォルト:
        ""

        リンクされたコマーシャル ブックマークのツールチップを取得または設定します。

        コード サンプル

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

      タイプ:
      bool
      デフォルト:
      true

      コマーシャルの場所を表示するかどうかを取得または設定します。

      コード サンプル

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

    タイプ:
    bool
    デフォルト:
    false

    ビデオ プレーヤーを全画面表示にするかどうかを取得または設定します。これは純粋な全画面表示ではありません。ブラウザーがそれを許可しないためです。コントロールの幅と高さを 100% に設定するだけです。

    コード サンプル

     
				//Initialize
				$(".selector").igVideoPlayer({
					fullscreen:true
				});

				//Get
				var fullScreen = $(".selector").igVideoPlayer("option", "fullscreen");

				//Set
				$(".selector").igVideoPlayer("option", "fullscreen", true);

  • height

    タイプ:
    enumeration
    デフォルト:
    null

    コントロールの高さを取得または設定します。null の場合、他の高さが定義されていない場合 (デフォルト)、データがフィットするよう伸縮します。

    コード サンプル

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

  • language
    継承

    タイプ:
    string
    デフォルト:
    "en"

    ウィジェットのロケール言語設定を取得または設定します。

    コード サンプル

     
					//Initialize
				$(".selector").igVideoPlayer({
					language: "ja"
				});

				// Get
				var language = $(".selector").igVideoPlayer("option", "language");

				// Set
				$(".selector").igVideoPlayer("option", "language", "ja");

  • locale

    タイプ:
    object
    デフォルト:
    {}

    • adMessage

      タイプ:
      bool
      デフォルト:
      ""

      広告メッセージ テキストを取得または設定します。

      コード サンプル

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

      タイプ:
      bool
      デフォルト:
      ""

      長い広告メッセージ テキストを取得または設定します。

      コード サンプル

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

      タイプ:
      bool
      デフォルト:
      ""

      期間が指定されていない場合、メッセージ テキストを取得または設定します。

      コード サンプル

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

      タイプ:
      bool
      デフォルト:
      ""

      新しい広告ウィンドウ タイトルを取得または設定します。

      コード サンプル

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

      タイプ:
      bool
      デフォルト:
      ""

      バッファー ラベル テキストを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							buffering: "Buffering"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").buffering;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { buffering: "Buffering"});

    • enterFullscreen

      タイプ:
      bool
      デフォルト:
      ""

      全画面表示ボタンのタイトルを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							enterFullscreen: "Go Fullscreen"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").enterFullscreen;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { enterFullscreen: "Go Fullscreen"});

    • exitFullscreen

      タイプ:
      bool
      デフォルト:
      ""

      全画面表示ボタンのタイトルを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							exitFullscreen: "Exit Fullscreen"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").exitFullscreen;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { exitFullscreen: "Exit Fullscreen"});

    • live

      タイプ:
      bool
      デフォルト:
      ""

      ライブ ビデオ タイトルを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							live: "Live"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").live;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { live: "Live" });

    • liveStream

      タイプ:
      bool
      デフォルト:
      ""

      ライブ ストリーム ビデオ タイトルを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							liveStream: "Live video"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").liveStream;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { liveStream: "Live video" });

    • paused

      タイプ:
      bool
      デフォルト:
      ""

      一時的ボタンのタイトルを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							paused: "Paused"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").paused;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { paused: "Paused" });

    • play

      タイプ:
      bool
      デフォルト:
      ""

      再生ボタンのタイトルを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							play: "Play"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").play;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { play: "Playing" });

    • playing

      タイプ:
      bool
      デフォルト:
      ""

      再生ボタンのタイトルを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							playing: "Playing"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").playing;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { playing: "Playing" });

    • progressLabelLongFormat

      タイプ:
      bool
      デフォルト:
      ""

      進行状況ラベルの長い形式を取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							progressLabelLongFormat: "$currentTime$ / $duration$"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").progressLabelLongFormat;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { progressLabelLongFormat: "$currentTime$ / $duration$" });

    • progressLabelShortFormat

      タイプ:
      bool
      デフォルト:
      ""

      進行状況ラベルの短い形式を取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							progressLabelShortFormat: "$currentTime$"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").progressLabelShortFormat;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { progressLabelShortFormat: "$currentTime$" });

    • relatedVideos

      タイプ:
      bool
      デフォルト:
      ""

      関連するビデオ テキストを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							relatedVideos: 'RELATED VIDEOS'
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").relatedVideos;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { relatedVideos: 'RELATED VIDEOS'});

    • replayButton

      タイプ:
      bool
      デフォルト:
      ""

      再生ボタン テキストを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							replayButton: 'Replay'
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").replayButton;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { replayButton: 'Replay'});

    • replayTooltip

      タイプ:
      bool
      デフォルト:
      ""

      再生ボタン ツールチップを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							replayTooltip: 'Replay'
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").replayTooltip;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { replayTooltip: 'Replay'});

    • skipTo

      タイプ:
      bool
      デフォルト:
      ""

      スキップ ボタンのタイトルを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							skipTo: "skip to"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").skipTo;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { skipTo: "skip to"});

    • volume

      タイプ:
      bool
      デフォルト:
      ""

      ボリューム ボタンのタイトルを取得または設定します。

      コード サンプル

       
					//Initialize
					$(".selector").igVideoPlayer({
						locale: {
							volume: "Volume"
						}
					});

					//Get
					var text = $(".selector").igVideoPlayer("option", "locale").volume;

					//Set
					$(".selector").igVideoPlayer("option", "locale", { volume: "Volume" });

  • loop

    タイプ:
    bool
    デフォルト:
    false

    ビデオの終了後、ビデオを再度開始するかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igVideoPlayer({
					loop: true
				});

				//Get
				var loop = $(".selector").igVideoPlayer("option", "loop");

				//Set
				$(".selector").igVideoPlayer("option", "loop", true);

  • muted

    タイプ:
    bool
    デフォルト:
    false

    ビデオの音量をミュートにするかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igVideoPlayer({
					muted: true
				});

				//Get
				var muted = $(".selector").igVideoPlayer("option", "muted");

				//Set
				$(".selector").igVideoPlayer("option", "muted", true);

  • posterUrl

    タイプ:
    string
    デフォルト:
    ""

    ビデオ データがない場合、表示する画像への URL を取得または設定します。

    コード サンプル

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

    タイプ:
    bool
    デフォルト:
    false

    ビデオ期間の読み込み初期データをプリロードするかどうかを取得または設定します。True の場合、ビデオのバッファリングを開始する場合もありますが、特定のブラウザーの実装によって異なります。

    コード サンプル

     
				//Initialize
				$(".selector").igVideoPlayer({
					preload: true
				});

				//Get
				var preload = $(".selector").igVideoPlayer("option", "preload");

				//Set
				$(".selector").igVideoPlayer("option", "preload", true);

  • progressLabelFormat

    タイプ:
    string
    デフォルト:
    "${currentTime} / ${duration}"

    ビデオの進行状況ラベルの形式を取得または設定します。${currentTime} で現在の再生位置を表し、${duration} でビデオの期間を表す必要があります。

    コード サンプル

     
				//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
    継承

    タイプ:
    enumeration
    デフォルト:
    en-US

    ウィジェットの領域設定を取得または設定します。

    コード サンプル

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

  • relatedVideos

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    ビデオ再生が終了したときに表示される関連ビデオの配列を取得または設定します。

    コード サンプル

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

      タイプ:
      string
      デフォルト:
      null

      関連するビデオ要素に適用されるカスタム CSS クラスを取得または設定します。

      コード サンプル

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

      タイプ:
      number
      デフォルト:
      null

      関連するビデオ画像の高さを取得または設定します。

      コード サンプル

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

      タイプ:
      string
      デフォルト:
      ""

      関連するビデオ画像の URL を取得または設定します。

      コード サンプル

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

      タイプ:
      string
      デフォルト:
      ""

      関連するビデオを再生するページへのリンクを取得または設定します。新しいウィンドウで開きます。ソースもある場合は、リンク プロパティが優先されます。

      コード サンプル

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

      タイプ:
      array
      デフォルト:
      []
      要素タイプ:
      object

      関連するビデオのソースを取得または設定します。

      コード サンプル

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

      タイプ:
      string
      デフォルト:
      ""

      ビデオのタイトルを取得または設定します。

      コード サンプル

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

      タイプ:
      number
      デフォルト:
      null

      関連するビデオ画像の幅を取得または設定します。

      コード サンプル

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

    タイプ:
    bool
    デフォルト:
    true

    ビデオのプログレス バー上でマウスをホバーするときに、コントロール シーク ツール チップを表示するかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igVideoPlayer({
					showSeekTime: false
				});

				//Get
				var showTime = $(".selector").igVideoPlayer("option", "showSeekTime");

				//Set
				$(".selector").igVideoPlayer("option", "showSeekTime", false);

  • sources

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    選択するビデオ ソースのリストを取得または設定します。コントロールによって、最適なコーデック/フォーマットが自動的に検出されます。サポートされるタイプは、ブラウザーによって異なり、mov、mp4、webm、ogg のいずれかです。

    コード サンプル

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

    タイプ:
    string
    デフォルト:
    ""

    ビデオのタイトルを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igVideoPlayer({
						title: "Ignite UI"
				});

				//Get
				var title = $(".selector").igVideoPlayer("option", "title");

				//Set
				$(".selector").igVideoPlayer("option", "title", "Ignite UI");

  • volume

    タイプ:
    number
    デフォルト:
    0.5

    ビデオの音量を取得または設定します。0.0 から 1.0 の間で設定できます。

    コード サンプル

     
				//Initialize
				$(".selector").igVideoPlayer({
						volume: 0.3
				});

				//Get
				var volLevel = $(".selector").igVideoPlayer("option", "volume");

				//Set
				$(".selector").igVideoPlayer("option", "volume", 0.3);

  • volumeAutohideDelay

    タイプ:
    number
    デフォルト:
    1000

    音量スライダーの自動非表示の遅延時間を取得または設定します。Infragistics 再生コントロールを使用する場合のみの設定です。

    コード サンプル

     
				//Initialize
				$(".selector").igVideoPlayer({
						volumeAutohideDelay: 1500
				});

				//Get
				var delay = $(".selector").igVideoPlayer("option", "volumeAutohideDelay");

				//Set
				$(".selector").igVideoPlayer("option", "volumeAutohideDelay", 1500);

  • width

    タイプ:
    enumeration
    デフォルト:
    null

    コントロールの幅を取得または設定します。null の場合、他の高さが定義されていない場合 (デフォルト)、データがフィットするよう伸縮します。

    コード サンプル

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

Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

  • bannerClick

    キャンセル可能:
    false

    バナーがクリックされると発生します。
    関数は引数 evt および ui を受け取ります。
    ui.bannerElement を使用して、DOM から banner HTML 要素を取得します。

    コード サンプル

     
				//Delegate
				$(document).delegate(".selector", "igvideoplayerbannerclick", function (evt, ui) {
					//return the clicked banner element
					ui.bannerElement;
				});

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

  • bannerHidden

    キャンセル可能:
    false

    バナーが非表示にされると発生します。
    関数は引数 evt および ui を受け取ります。
    ui.index を使用して、banners 配列からバナー インデックスを取得します。
    ui.banner を使用して、banners 配列からバナー オブジェクトを取得します。
    ui.bannerElement を使用して、DOM から banner HTML 要素を取得します。

    コード サンプル

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

    キャンセル可能:
    false

    再生バナー表示イベントの名前を定義します。バナーが表示されるときに発生します。
    関数は引数 evt および ui を受け取ります。
    ui.index を使用して、banners 配列からバナー インデックスを取得します。
    ui.banner を使用して、banners 配列からバナー オブジェクトを取得します。
    ui.bannerElement を使用して、DOM から banner HTML 要素を取得します。

    コード サンプル

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

    キャンセル可能:
    false

    ブックマークがクリックされると発生します。
    関数は引数 evt および ui を受け取ります。
    ui.bookmark を使用して、bookmarks 配列からブックマーク オブジェクトを取得します。
    ui.bookmarkElement を使用して、DOM から HTML 要素を取得します。

    コード サンプル

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

    キャンセル可能:
    false

    ブックマークがクリックされると発生します。
    関数は引数 evt および ui を受け取ります。
    ui.source を使用して、再生ビデオの URL を取得します。
    ui.bookmark を使用して、bookmarks 配列からブックマーク オブジェクトを取得します。
    ui.bookmarkElement を使用して、DOM から HTML 要素を取得します。

    コード サンプル

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

    キャンセル可能:
    false

    ブラウザーが HTML 5 ビデオをサポートしていない場合に発生します。

    コード サンプル

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

  • buffering

    キャンセル可能:
    false

    データのチャンクがバッファーされたときに発生します。
    関数は引数 evt および ui を受け取ります。
    ui.source を使用して、再生ビデオの URL を取得します。
    ui.buffered を使用して、バファリングのパーセンテージを取得します。

    コード サンプル

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

    キャンセル可能:
    false

    ビデオの終了時に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.source を使用して、再生ビデオの URL を取得します。
    ui.duration を使用して、ビデオの期間 (秒) を取得します。

    コード サンプル

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

    キャンセル可能:
    true

    igVideoPlayer が全画面表示モードに入るときに発生します。
    関数は引数 evt および ui を受け取ります。
    ui.source を使用して、再生ビデオの URL を取得します。

    コード サンプル

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

    キャンセル可能:
    true

    igVideoPlayer が全画面表示モードから終了するときに発生します。
    関数は引数 evt および ui を受け取ります。
    ui.source を使用して、再生ビデオの URL を取得します。

    コード サンプル

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

    キャンセル可能:
    false

    ビデオが一時停止されると発生します。
    関数は引数 evt および ui を受け取ります。
    ui.source を使用して、再生ビデオの URL を取得します。
    ui.duration を使用して、ビデオの期間 (秒) を取得します。

    コード サンプル

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

    キャンセル可能:
    false

    ビデオが再生するときに発生します。
    関数は引数 evt および ui を受け取ります。
    ui.source を使用して、再生ビデオの URL を取得します。
    ui.duration を使用して、ビデオの期間 (秒) を取得します。

    コード サンプル

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

    キャンセル可能:
    false

    ビデオが再生位置に進むと発生します。
    関数は引数 evt および ui を受け取ります。
    ui.source を使用して、再生ビデオの URL を取得します。
    ui.currentTime を使用して、イベントが発生したビデオの現在の位置を取得します。
    ui.duration を使用して、ビデオの期間 (秒) を取得します。

    コード サンプル

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

    キャンセル可能:
    true

    関連ビデオがクリックされたときに発生します。
    関数は引数 evt および ui を受け取ります。
    ui.relatedVideo を使用して、relatedVideos 配列から relatedVideo オブジェクトを取得します。
    ui.relatedVideoElement を使用して、DOM から relatedVideo HTML 要素を取得します。

    コード サンプル

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

    キャンセル可能:
    false

    igVideoPlayer がサーバーからのデータを待っているときに発生します。
    関数は引数 evt および ui を受け取ります。
    ui.source を使用して、再生ビデオの URL を取得します。
    ui.currentTime を使用して、イベントが発生したビデオの現在の位置を取得します。
    ui.duration を使用して、ビデオの期間 (秒) を取得します。

    コード サンプル

     
				//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) {...}
				});

  • changeGlobalLanguage
    継承

    .igVideoPlayer( "changeGlobalLanguage" );

    ウィジェットの言語をグローバルの言語に変更します。グローバルの言語は $.ig.util.language の値です。

    コード サンプル

     
				$(".selector").igVideoPlayer("changeGlobalLanguage");

  • changeGlobalRegional
    継承

    .igVideoPlayer( "changeGlobalRegional" );

    ウィジェットの地域設定をグローバルの地域設定に変更します。グローバルの地域設定は $.ig.util.regional にあります。

    コード サンプル

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

  • changeLocale

    .igVideoPlayer( "changeLocale" );

    ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
    注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。

    コード サンプル

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

  • currentTime

    .igVideoPlayer( "currentTime", val:number );
    返却型:
    number
    返却型の説明:
    現在の再生位置を返します。

    再生中のビデオの現在の時間を取得または設定します。

    • val
    • タイプ:number
    • 移動したい再生位置を秒で指定します。

    コード サンプル

     
				//Get
				var currentTime = $(".selector").igVideoPlayer("currentTime");

				//Set
				$(".selector").igVideoPlayer("currentTime", 60);

  • destroy

    .igVideoPlayer( "destroy" );

    ウィジェットを破棄します。

    コード サンプル

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

  • duration

    .igVideoPlayer( "duration" );
    返却型:
    number

    再生中のビデオの現在の再生時間を取得または設定します。期間がロードされていないか、ビデオがライブ ストリームの場合、NaN になることがあります。

    コード サンプル

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

  • ended

    .igVideoPlayer( "ended" );
    返却型:
    bool

    現在再生したビデオが終了したかどうかを取得します。

    コード サンプル

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

  • hideAdMessage

    .igVideoPlayer( "hideAdMessage" );

    広告メッセージが表示されている場合非表示にします。

    コード サンプル

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

  • hideBanner

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

    広告バナーが表示されている場合非表示にします。

    • index
    • タイプ:number
    • バナー配列からのバナーのインデックスを指定します。

    コード サンプル

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

  • pause

    .igVideoPlayer( "pause" );

    現在の再生中のビデオがある場合、一時停止します。

    コード サンプル

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

  • paused

    .igVideoPlayer( "paused" );
    返却型:
    bool

    再生中のビデオが一時停止されているかどうかを返します。

    コード サンプル

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

  • play

    .igVideoPlayer( "play" );

    現在読み込んでいるビデオがある場合再生します。

    コード サンプル

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

  • playCommercial

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

    このビデオのリンク コマーシャルを再生します。

    • commercial
    • タイプ:object
    • 再生するリンク コマーシャル指定します。

    コード サンプル

     
				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" );

    コマーシャルをサイド表示するためにリセットします。

    コード サンプル

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

  • screenshot

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

    現在のビデオ フレームのスクリーンショットを取得します。ページに配置して表示させるキャンバス オブジェクトを返します。これはキャンバスのブラウザー サポートに依存します。

    • scaleFactor
    • タイプ:number
    • オプション
    • スケール係数を 0～1 の間で指定します。

    コード サンプル

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

  • seeking

    .igVideoPlayer( "seeking" );
    返却型:
    bool

    プレーヤーが新しく再生する場所を検索するかどうかを取得します。

    コード サンプル

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

  • showBanner

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

    広告バナーがある場合表示します。

    • index
    • タイプ:number
    • バナー配列からのバナーのインデックスを指定します。

    コード サンプル

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

  • supportsH264BaselineVideo

    .igVideoPlayer( "supportsH264BaselineVideo" );
    返却型:
    bool

    現在のブラウザーが H.264 codec をサポートするかどうかを取得します。

    コード サンプル

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

  • supportsOggTheoraVideo

    .igVideoPlayer( "supportsOggTheoraVideo" );
    返却型:
    bool

    現在のブラウザーが Theora codec をサポートするかどうかを取得します。

    コード サンプル

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

  • supportsVideo

    .igVideoPlayer( "supportsVideo" );
    返却型:
    bool

    現在のブラウザーがビデオ タグをサポートするかどうかを取得します。

    コード サンプル

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

  • supportsWebmVideo

    .igVideoPlayer( "supportsWebmVideo" );
    返却型:
    bool

    現在のブラウザーが WEBM codec をサポートするかどうかを取得します。

    コード サンプル

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

  • togglePlay

    .igVideoPlayer( "togglePlay" );

    コントロールの再生状態を切り替えます。ビデオが再生中の場合は一時停止、一時停止中の場合は再生します。

    コード サンプル

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

  • widget

    .igVideoPlayer( "widget" );

    ウィジェットがインスタンス化された要因を返します。

    コード サンプル

     
			var videoPlayer = $(".selector").igVideoPlayer("widget");

  • ui-igplayer-active-video

    コントロールが有効なときにメイン ビデオに適用される CSS クラスを取得または設定します。

  • ui-igplayer-ad-bookmark

    組み込みコマーシャル ブックマークに適用される CSS クラスを取得または設定します。

  • ui-igplayer-ad-msg

    再開ビデオ メッセージ範囲に適用される CSS クラスを取得または設定します。

  • ui-igplayer-ad-msg-close

    再開ビデオ メッセージ閉じるボタンに適用される CSS クラスを取得または設定します。

  • ui-icon-close

    再開ビデオ メッセージ閉じるボタンに適用される CSS クラスを取得または設定します。

  • ui-igplayer-ad-msg-container

    再開ビデオ メッセージ コンテナーに適用される CSS クラスを取得または設定します。

  • ui-igplayer-banner ui-corner-all

    バナー コンテナー dv に適用される CSS クラスを取得または設定します。

  • ui-igplayer-banner-close

    バナー閉じるボタンに適用される CSS クラスを取得または設定します。

  • ui-icon-close

    バナー閉じるアイコンに適用される CSS クラスを取得または設定します。

  • ui-igplayer-banner-container

    バナー コンテナー dv に適用される CSS クラスを取得または設定します。

  • ui-widget ui-igplayer

    ウィジェット ベース CSS クラスを取得または設定します。

  • ui-igplayer-bookmark-active-item

    ブックマーク領域にアクティブなブックマーク項目を表示する CSS クラスを取得または設定します。

  • ui-widget ui-igplayer-bookmark-container

    ブックマーク コンテナー DIV に適用される CSS クラスを取得または設定します。

  • ui-widget-header ui-igplayer-bookmark-header

    ブックマーク ヘッダー コンテナーに適用される CSS クラスを取得または設定します。

  • ui-igplayer-bookmark-item-disabled

    ブックマーク領域の項目が無効な場合にブックマーク リスト項目に適用される CSS クラスを取得または設定します。

  • ui-igplayer-bookmark-item-time

    ブックマーク領域に日時を表示するブックマーク リスト項目に適用される CSS クラスを取得または設定します。

  • ui-igplayer-bookmark-item-title

    ブックマーク領域に件名を表示するブックマーク リスト項目に適用される CSS クラスを取得または設定します。

  • ui-widget-content ui-igplayer-bookmark-list

    ブックマーク領域のブックマーク リスト項目に適用される CSS クラスを取得または設定します。

  • ui-igplayer-centerplaybutton-pause

    センター一時停止ボタンに適用される CSS クラスを取得または設定します。

  • ui-igplayer-centerplaybutton-play

    センター再生停止ボタンに適用される CSS クラスを取得または設定します。

  • ui-igplayer-centerplaybutton-icon

    センター再生ボタンに適用される CSS クラスを取得または設定します。

  • ui-widget-header ui-igplayer-controls

    プレーヤー コントロール CSS クラスを取得または設定します。

  • ui-igplayer-controls-hide

    コントロール非表示 CSS クラスを取得または設定します。コントロール自動非表示に適用されます。

  • ui-igplayer-fullscreen-button

    再生コントロールの全画面ボタンに適用される CSS クラスを取得または設定します。

  • ui-icon ui-igbutton-icon ui-icon-arrow-4-diag

    全画面ボタン アイコンに適用される CSS クラスを取得または設定します。

  • ui-igplayer-linked-bookmark

    リンク コマーシャル ブックマークに適用される CSS クラスを取得または設定します。

  • ui-igplayer-playbutton

    再生コントロールの再生ボタンに適用される CSS クラスを取得または設定します。

  • ui-igplayer-progressbar ui-corner-all

    再生コントロールのスライダー ウィジェットに適用される CSS クラスを取得または設定します。

  • ui-igplayer-progresslabel

    再生コントロールの進行状況ラベルに適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-video-bar

    再生および全画面ボタンを含む関連ビデオボタン領域に適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-video

    関連ビデオ要素に適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-video-first

    最初の関連ビデオ要素に適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-video-hover

    関連ビデオ ホバーに適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-video-last

    最後の関連ビデオ要素に適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-video-replay

    関連ビデオ領域の再生ボタンに適用される CSS クラスを取得または設定します。

  • ui-icon-arrowrefresh-1-s

    再生ボタン アイコンに適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-video-container

    関連ビデオ コンテナー クラスに適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-scroller-left

    左スクロール ボタンに適用される CSS クラスを取得または設定します。

  • ui-icon-triangle-1-w

    左スクロール ボタン アイコンに適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-list

    関連ビデオ リストに適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-scroller-right

    関連ビデオの右スクロール ボタンに適用される CSS クラスを取得または設定します。

  • ui-icon-triangle-1-e

    スクロール ボタンの右アイコンに適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-video-header

    関連ビデオ ヘッダー クラスに適用される CSS クラスを取得または設定します。

  • ui-igplayer-related-video-outer-container

    関連ビデオ コンテナー クラスに適用される CSS クラスを取得または設定します。

  • ui-igplayer-seektooltip

    検索ツールチップに適用される CSS クラスを取得または設定します。

  • ui-html5-non-html5-supported-message ui-helper-clearfix

    プレーヤーがHTML 5 をサポートしていないブラウザーで開かれたときに表示されるスパン要素に適用されるクラスを取得または設定します。

  • ui-igplayer-not-supported-video-source

    ビデオ ソースがサポートされていないときに表示されるアンカー要素に適用される CSS クラスを取得または設定します。

  • ui-igplayer-not-supported-video-source-icon

    サポートされないビデオ ソース アイコンを表示するアンカー要素に適用される CSS クラスを取得または設定します。

  • ui-igplayer-video

    メイン ビデオ要素に適用されるクラスを取得または設定します。

  • ui-igplayer-volumecontrol

    再生コントロールの音量コントロール ボタンに適用される CSS クラスを取得または設定します。

  • ui-igplayer-volumeslider

    再生コントロールの音量スライダーに適用される CSS クラスを取得または設定します。

  • ui-igplayer-waiting

    バッファー インジケーターに適用される CSS クラスを取得または設定します。

  • ui-igplayer-waiting-icon

    バッファー インジケーター アイコンに適用される CSS クラスを取得または設定します。

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