Hello.
I've looked at the samples and cannot find the necessary jquery and style includes.
Your examples reference "SamplesCommon/jQuery/...." but I can't find them in my installation.
Perhaps a better step-by-step example would help.
Also, my video is located at a URL (mp4). Is that acceptable?
Please advise.
Thank you,
Mike
Hello Mike,
Thank you for posting in our forum.
You can find the necessary jquery and style files in the default installation folder
C:\Program Files (x86)\Infragistics\NetAdvantage 2011.2\jQuery
The default samples source code folder is
C:\Users\Public\Documents\Infragistics\NetAdvantage 2011.2\jQuery\Samples
I recommend you going through the online documentation article
http://help.infragistics.com/NetAdvantage/jQuery/Current/CLR4.0?page=igVideoPlayer_Overview.html
Regarding the video file : Supported types are depending on the browser and could be one of the following mov, mp4, webm, ogv.
http://help.infragistics.com/NetAdvantage/jQuery/Current/CLR4.0?page=Infragistics.Web.Mvc~Infragistics.Web.Mvc.VideoPlayerModel~Sources.html
Please feel free to ask if you need further assistance
Thanks for the reply, Tsvetelina.
I found the files.
However, the second link you provided just echoes what you wrote.
The video file is an .mp4.
I am using the latest version of all the browsers.
In each browser the control states "No compatible video source." I can, however, view the video from Apple's Quicktime plug-in.
Please advise,
Thank you for your follow-up.
Are you able to open this particular video file using the standard HTML5 video tag?
Video Player uses it internally so if you can't view the video using it you won't be able to do it with VideoPlayer
I used the below code snippet and I was able to view the mp4 video
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script> <script src="ig_ui/js/min/ig.ui.min.js" type="text/javascript"></script> <script src="ig_ui/js/min/ig.ui.videoplayer.min.js" type="text/javascript"></script> <link id="link1" href="ig_ui/themes/ig/jquery.ui.custom.min.css" rel="Stylesheet" type="text/css" /> <link id="link2" href="ig_ui/themes/base/ig.ui.min.css" rel="Stylesheet" type="text/css" /> <script type="text/javascript"> $(window).load(function () { $('#videoPlayer1').igVideoPlayer({ sources: ['http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.mp4'], width: 720, height: 270, fullscreen: false, browserControls: false, autohide: true, autoplay: false, centerButtonHideDelay: 1500, title: 'Big Buck Bunny', muted: false, volume: 0.8, volumeAutohideDelay: 1500, currentTime: 0, showSeekTime: true }); }); </script> </head> <body> <div id="videoPlayer1"> </div> </body> </html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="ig_ui/js/min/ig.ui.min.js" type="text/javascript"></script>
<script src="ig_ui/js/min/ig.ui.videoplayer.min.js" type="text/javascript"></script>
<link id="link1" href="ig_ui/themes/ig/jquery.ui.custom.min.css" rel="Stylesheet"
type="text/css" />
<link id="link2" href="ig_ui/themes/base/ig.ui.min.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(window).load(function () {
$('#videoPlayer1').igVideoPlayer({
sources: ['http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.mp4'],
width: 720,
height: 270,
fullscreen: false,
browserControls: false,
autohide: true,
autoplay: false,
centerButtonHideDelay: 1500,
title: 'Big Buck Bunny',
muted: false,
volume: 0.8,
volumeAutohideDelay: 1500,
currentTime: 0,
showSeekTime: true
});
</script>
</head>
<body>
<div id="videoPlayer1">
</div>
</body>
</html>
Please let me know if you have further questions.
With all due respct, I will not perform an IG control test if it has to refer to an outsise party: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
That link is not included in your documentation.
Perhaps you provided a bad example.
I have refered the jQuery UI library.
You can use the js file from our sample source code
C:\Users\Public\Documents\Infragistics\NetAdvantage 2011.2\jQuery\Samples\Scripts\jquery-ui.min.js
C:\Users\Public\Documents\Infragistics\NetAdvantage 2011.2\jQuery\Samples\Scripts\jquery.tmpl.js
I am attaching the js files
Let me know if you have further questions