製品版のみの機能
ビデオ プレーヤー - ASP.NET MVC
このサンプルは、ASP.NET MVC ビューで ASP.NET MVC ヘルパーを使用してビデオ プレーヤーを初期化する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<style type="text/css">
#player1 {
z-index: 1000;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
@(Html.
Infragistics().
VideoPlayer().
ID("player1").
Sources(ViewData["videoSources"] as List<string>).
Width("100%").
Fullscreen(false).
BrowserControls(false).
Autohide(false).
Autoplay(false).
VolumeAutohideDelay(2000).
Title("Infragistics プレゼンテーション").
Banners(c =>
{
c.
AddBanner().
ImageUrl(Url.Content("~/images/samples/video-player/banner.png")).
Link("http://www.infragistics.com/").
Times(new List<int>() { 5, 20, 60 }).
Visible(false).
CloseBanner(true).
Animate(true).
Autohide(true).
Hidedelay(10000).
Width("270px").
Height("67px");
}).
PosterUrl(ViewData["posterUrl"] as string).
Render()
)
<script>
var alternate = false;
$(function () {
$("#player1").bind({
igvideoplayerbannervisible: function (sender, eventArgs) {
if (alternate === true)
eventArgs.bannerElement.css('top', 130);
else
eventArgs.bannerElement.css('top', 0);
alternate = !alternate;
},
igvideoplayerbannerclick: function () {
$("#player1").igVideoPlayer('pause');
}
});
});
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class VideoPlayerController : Controller
{
[ActionName("aspnet-mvc-helper")]
public ActionResult AspNetMvcHelper()
{
ViewData["videoSources"] = new List<string>() {
"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" };
ViewData["posterUrl"] = Url.Content("~/images/samples/video-player/ig-pres.png");
return View("aspnet-mvc-helper");
}
[ActionName("fallback-video")]
public ActionResult FallbackVideo()
{
ViewData["videoSources"] = new List<string>() {
"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" };
ViewData["posterUrl"] = Url.Content("~/images/samples/video-player/quince-intro-1.png");
return View("fallback-video");
}
}
}