<!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">
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.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>
<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">
Play
</button>
<button id="btnAddScreenShot" class="buttons" type="button">
Add screenshot
</button>
<div style="width: 120px; height: 20px; margin-top: 10px;">
<div style="width: 40px; float: left; margin-right: 10px; font-size: small;">
Volume
</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">
Current Time <span style="display: inline; color: blue;">0</span>
</p>
<p id="html5Video">
Supports HTML5 video:
</p>
<p id="h264Video">
Supports H264/AVC video:
</p>
<p id="oggVideo">
Supports Ogg/Theora video:
</p>
<p id="webMVideo">
Supports WebM video:
</p>
</div>
<div id="screenShots" class="rightContainer">
<center>
<p style="font-weight: bold;">
Screenshots
</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: 'River',
description: 'River',
time: 13
},
{
title: 'Big Buck Bunny Appears',
description: 'Big Buck Bunny Appears',
time: 33
}
]
});
if ($("#videoPlayer1").igVideoPlayer("supportsVideo"))
$("#html5Video").html($("#html5Video").html() + '<span class="green">YES</span>');
else
$("#html5Video").html($("#html5Video").html() + '<span class="red">NO</span>');
if ($("#videoPlayer1").igVideoPlayer("supportsH264BaselineVideo"))
$("#h264Video").html($("#h264Video").html() + '<span class="green">YES</span>');
else
$("#h264Video").html($("#h264Video").html() + '<span class="red">NO</span>');
if ($("#videoPlayer1").igVideoPlayer("supportsOggTheoraVideo"))
$("#oggVideo").html($("#oggVideo").html() + '<span class="green">YES</span>');
else
$("#oggVideo").html($("#oggVideo").html() + '<span class="red">NO</span>');
if ($("#videoPlayer1").igVideoPlayer("supportsWebmVideo"))
$("#webMVideo").html($("#webMVideo").html() + '<span class="green">YES</span>');
else
$("#webMVideo").html($("#webMVideo").html() + '<span class="red">NO</span>');
$("#videoPlayer1").igVideoPlayer().bind({
igvideoplayerplaying: function () {
playing = true;
$('#btnPlay span').html("Pause");
},
igvideoplayerpaused: function () {
playing = false;
$('#btnPlay span').html("Play");
},
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>
