OSS で利用できる機能
ビデオ プレーヤー - 共通機能
このサンプルでは jQuery ビデオ プレイヤーの標準機能を紹介します。再生、ボリューム、フレームのスクリーンショット、ブラウザー互換性の検出など、多数の機能が含まれます。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
音量
現在の値: 0
HTML5 ビデオ：
H264/AVC ビデオ：
Ogg/Theora ビデオ：
WebM ビデオ：
スクリーンショット
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
ブラウザー毎の HTML5 ビデオ サポートを確認するには、このサンプルを各ブラウザーで実行してみてください。
注: このサンプルをモバイル デバイスで実行する場合、Modernizr JavaScript ライブラリが未定義である以外、デフォルトのデバイス ビデオ プレーヤー コントロールを描画します。Modernizr ライブラリがページで利用できない場合、igVideoPlayer コントロールを描画します。この場合、デフォルト デバイス ビデオ プレーヤーよりタッチ機能が少ない場合があります。そのため、このサンプルでは Modernizr ライブラリを使用し、モバイル デバイスでは igVideoPlayer ではなくデフォルト デバイス ビデオ プレーヤーを使用します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<style type="text/css">
canvas {
margin-bottom: 3px;
}
span.green {
display: inline;
color: white;
padding: 2px;
background: green;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
span.red {
display: inline;
color: white;
padding: 2px;
background: red;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.controlsContainer {
width: 310px;
height: 380px;
margin-left: 7px;
background: none repeat scroll 0 0 #CFCFCF;
border: 1px solid #B1B1B1;
border-radius: 4px;
moz-border-radius: 4px;
webkit-border-radius: 4px;
float: left;
}
.leftContainer {
width: 150px;
height: 329px;
padding: 10px;
float: left;
}
.rightContainer {
width: 30%;
height: 290px;
border-color: #999999;
border-style: none none none solid;
border-width: 1px;
overflow-x: hidden;
overflow-y: auto;
margin-left: 5px;
margin-top: 10px;
padding-left: 16px;
padding-right: 10px;
padding-bottom: 10px;
float: left;
}
.buttons {
width: 150px;
margin-top: 2px;
}
.videoPlayerContainer {
float: left;
width: 59%;
}
.screenshot {
background: white;
border: 1px solid #B1B1B1;
display: block;
height: 38px;
left: 50%;
margin-left: -54px;
position: relative;
width: 100px;
}
#videoPlayer1 {
z-index: 1000;
}
#html5Video, #h264Video, #oggVideo, #webMVideo, #currentTime {
font-family: "Segoe UI", Arial, sans-serif;
font-size: 0.8em;
margin-bottom: 5px !important;
}
#currentTime {
margin-top: 20px;
}
</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.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<div style="width: 100%; overflow: hidden;">
<div class="videoPlayerContainer">
<div id="videoPlayer1">
</div>
</div>
<div id="rightControls" class="controlsContainer" style="width: 39%;">
<div id="controls" class="leftContainer" style="width: 50%;">
<center>
<button id="btnPlay" class="buttons" type="button">
再生
</button>
<button id="btnAddScreenShot" class="buttons" type="button">
スクリーンショットの追加
</button>
<div style="width: 120px; height: 20px; margin-top: 10px;">
<div style="width: 40px; float: left; margin-right: 10px; font-size: small;">
音量
</div>
<div id="slider" style="width: 60px; float: left; background-color: White; margin-top: 7px;">
</div>
<div style="clear: both;">
</div>
</div>
</center>
<p id="currentTime">
現在の値: <span style="display: inline; color: blue;">0</span>
</p>
<p id="html5Video">
HTML5 ビデオ：
</p>
<p id="h264Video">
H264/AVC ビデオ：
</p>
<p id="oggVideo">
Ogg/Theora ビデオ：
</p>
<p id="webMVideo">
WebM ビデオ：
</p>
</div>
<div id="screenShots" class="rightContainer">
<center>
<p style="font-weight: bold;">
スクリーンショット
</p>
</center>
</div>
</div>
<div style="clear: both;"></div>
</div>
<script>
$(function () {
var playing = false;
$("#videoPlayer1").igVideoPlayer({
sources: ["https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.mp4",
"https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.webm",
"https://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.ogv"
],
width: "100%",
posterUrl: "/images/samples/video-player/big-buck-bunny.png",
fullscreen: false,
browserControls: false,
autoplay: false,
title: 'Big Buck Bunny',
muted: false,
autohide: false,
bookmarks: [
{
title: '川',
description: '川',
time: 13
},
{
title: 'Big Buck Bunny の紹介',
description: 'Big Buck Bunny の紹介',
time: 33
}
]
});
if ($("#videoPlayer1").igVideoPlayer("supportsVideo"))
$("#html5Video").html($("#html5Video").html() + '<span class="green">はい</span>');
else
$("#html5Video").html($("#html5Video").html() + '<span class="red">いいえ</span>');
if ($("#videoPlayer1").igVideoPlayer("supportsH264BaselineVideo"))
$("#h264Video").html($("#h264Video").html() + '<span class="green">はい</span>');
else
$("#h264Video").html($("#h264Video").html() + '<span class="red">いいえ</span>');
if ($("#videoPlayer1").igVideoPlayer("supportsOggTheoraVideo"))
$("#oggVideo").html($("#oggVideo").html() + '<span class="green">はい</span>');
else
$("#oggVideo").html($("#oggVideo").html() + '<span class="red">いいえ</span>');
if ($("#videoPlayer1").igVideoPlayer("supportsWebmVideo"))
$("#webMVideo").html($("#webMVideo").html() + '<span class="green">はい</span>');
else
$("#webMVideo").html($("#webMVideo").html() + '<span class="red">いいえ</span>');
$("#videoPlayer1").igVideoPlayer().bind({
igvideoplayerplaying: function () {
playing = true;
$('#btnPlay span').html("停止");
},
igvideoplayerpaused: function () {
playing = false;
$('#btnPlay span').html("再生");
},
igvideoplayerprogress: function () {
$("#currentTime span").html($("#videoPlayer1").igVideoPlayer("currentTime"));
},
igvideoplayerenterfullscreen: function () {
$("html").css('overflow-y', 'hidden');
},
igvideoplayerexitfullscreen: function () {
$("html").css('overflow-y', 'scroll');
}
});
$("#btnAddScreenShot").igButton().click(function () {
var canvas = $("#videoPlayer1").igVideoPlayer("screenshot");
$(canvas).addClass("screenshot");
$("#screenShots").append(canvas);
});
$("#btnPlay").igButton().click(function () {
if (playing)
$("#videoPlayer1").igVideoPlayer("pause");
else
$("#videoPlayer1").igVideoPlayer("play");
});
$("#slider").slider({ value: 50 }).bind("slide", function (event, ui) {
var value = ui.value;
$("#videoPlayer1").igVideoPlayer("option", "volume", value / 100);
});
if ($("#videoPlayer1").igVideoPlayer("supportsVideo") === false) {
$("#rightControls").hide();
$("#copyrightContainer").hide();
}
});
</script>
</body>
</html>