<div>
<div id="MediaPlayerHost"></div>
<table cellpadding="0" cellspacing="0" border="0" style="background-color:#D7D7D7; height:47px; width:362px">
<tr>
<td>
<div id='videospacing' class="videospacing">
<div id='items' class='items'></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="videopagination">
<nobr id="pag">1-3</nobr>
</div>
<div class="videonextpre">
<a id='prev' onclick='javascript:move_prev()' class="left" disabled=disabled></a>
<a id='next' onclick='javascript:move_next()' class="right"></a>
</div>
</td>
</tr>
</table>
<script type="text/javascript" src="_layouts/mediaplayer.js"></script>
<script type="text/javascript">
var idCount = 0, modified = 0, prev = 0, modifiedFirst = 0, idCountFirst = 0, counter = 0, itemCount = 0, pageCount = 4, click = null, count = 0, nextCount = 0; prevCount = 4;
function move_next() {
prev = 0;
counter = 0;
click = 'next';
var curCounter = 0;
jQuery("div[class='items']").find("a").each(function () {
jQuery(this).remove();
});
retrieveListItems();
document.getElementById('prev').disabled = false;
document.getElementById('prev').style.cursor = "pointer";
document.getElementById('prev').className = 'left';
if (counter == 5) {
document.getElementById('next').disabled = false;
document.getElementById('next').style.cursor = "pointer";
document.getElementById('next').className = 'right';
}
else {
document.getElementById('next').disabled = true;
document.getElementById('next').style.cursor = "text";
document.getElementById('next').className = 'rightdim';
// document.getElementById('next').Attributes.Add('onMouseOver', "this.style.cursor='text'");
}
setTimeout('displayPageCount()', 500);
// curCounter = jQuery("div[class='items']").find("a").length;
//
// pageCount = pageCount + curCounter;
// if (curCounter == 0) {
// document.getElementById("pag").innerHTML = pageCount + ' of ' + itemCount;
// }
// else {
// alert(curCounter);
// document.getElementById("pag").innerHTML = (pageCount - curCounter + 1) + '-' + pageCount + ' of ' + itemCount;
// }
}
function displayPageCount() {
curCounter = jQuery("div[class='items']").find("a").length;
pageCount = pageCount + curCounter;
if (curCounter == 1) {
nextCount = prevCount + 1;
document.getElementById("pag").innerHTML = (prevCount + 1) + ' of ' + itemCount;
}
else {
nextCount = prevCount + 1;
document.getElementById("pag").innerHTML = (prevCount + 1) + '-' + (prevCount + curCounter) + ' of ' + itemCount;
}
}
function displayPrevPageCount() {
curCounter = jQuery("div[class='items']").find("a").length;
// alert(curCounter);
document.getElementById("pag").innerHTML = (nextCount - 4) + '-' + (nextCount - 1) + ' of ' + itemCount;
}
function move_prev() {
prev = 1;
counter = 0;
click = 'prev';
var curCounter = 0;
jQuery("div[class='items']").find("a").each(function () {
jQuery(this).remove();
});
retrieveListItems();
document.getElementById('next').disabled = false;
document.getElementById('next').style.cursor = "pointer";
document.getElementById('next').className = 'right';
// curCounter = jQuery("div[class='items']").find("a").length;
pageCount = pageCount - curCounter;
if ((nextCount - 4) == 1) {
document.getElementById('prev').disabled = true;
document.getElementById('prev').style.cursor = "text";
document.getElementById('prev').className = 'leftdim';
}
else {
document.getElementById('prev').disabled = false;
document.getElementById('prev').style.cursor = "pointer";
document.getElementById('prev').className = 'left';
}
prevCount = nextCount - 1;
document.getElementById("pag").innerHTML = (nextCount - 4) + '-' + (nextCount - 1) + ' of ' + itemCount;
// setTimeout('displayPrevPageCount()', 1000);
//document.getElementById("pag").innerHTML = (pageCount - 3) + '-' + pageCount + ' of ' + itemCount;
}
function scroll() {
$('.items').cycle({
fx: 'cover',
speed: 500,
timeout: 2000
});
}
function getMediaPlayer() {
var p = document.getElementById("MediaPlayerHost")
var obj = p.getElementsByTagName("object");
return obj[0].Content.MediaPlayer;
}
function SetMediaSource(imgObj) {
//alert(imgObj.id);
jQuery("div[class='items']").find("img").each(function () {
jQuery(this).attr("class", "photo");
});
var imagTga = document.getElementById(imgObj.id);
if (imagTga != undefined) {
document.getElementById(imgObj.id).setAttribute("class", "videoselected");
}
var p = getMediaPlayer();
var clickArgs = imgObj.tag.split(";");
p.MediaSource = clickArgs[0];
p.PreviewImageSource = clickArgs[1];
p.AutoPlay = true;
p.Play();
}
function SetMediaSourceImage(imgObj) {
var p = getMediaPlayer();
var clickArgs = imgObj.tag.split(";");
p.PreviewImageSource = clickArgs[1];
p.AutoPlay = false;
}
function DisplayCount() {
var clientContext = SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Videos');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><RowLimit></RowLimit></View>');
this.listItems = oList.getItems(camlQuery);
clientContext.load(listItems);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onListItemsLoadSuccess),
Function.createDelegate(this, this.onQueryFailed));
retrieveListItems();
}
function onListItemsLoadSuccess(sender, args) {
var listEnumerator = this.listItems.getEnumerator();
while (listEnumerator.moveNext()) {
itemCount++;
}
//alert(itemCount);
document.getElementById("pag").innerHTML = (pageCount - 3) + '-' + pageCount + ' of ' + itemCount;
if (itemCount == 4) {
document.getElementById('next').disabled = true;
document.getElementById('next').style.cursor = "text";
document.getElementById('next').className = 'rightdim';
}
document.getElementById('prev').style.cursor = "text";
document.getElementById('prev').className='leftdim';
}
function retrieveListItems() {
var clientContext = SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Videos');
var camlQuery = new SP.CamlQuery();
if (idCount == 0 && modified == 0) {
camlQuery.set_viewXml('<View><Query><OrderBy><FieldRef Name="Modified" Ascending="False" /></OrderBy></Query><RowLimit>4</RowLimit></View>');
}
else {
if (prev == 0) {
var d = Date.parse(modified);
var mon = new Date(d);
// 2012-04-18T21:48:39Z
var fDate = mon.getYear() + '-' + (mon.getMonth() + 1) + '-' + mon.getDate() + 'T' + mon.getHours() + ':' + mon.getMinutes() + ':' + mon.getSeconds() + 'Z';
camlQuery.set_viewXml('<View><Query><Where><And><Leq><FieldRef Name="Modified" /> ' +
'<Value IncludeTimeValue="TRUE" Type="DateTime">' + fDate + '</Value></Leq><Neq>' +
'<FieldRef Name="ID" /><Value Type="Counter">' + idCount + '</Value></Neq></And></Where><OrderBy>' +
'<FieldRef Name="Modified" Ascending="False" /></OrderBy></Query><RowLimit>5</RowLimit></View>');
}
else if (prev == 1) {
var d = Date.parse(modifiedFirst);
var mon = new Date(d);
// 2012-04-18T21:48:39Z
var fDate = mon.getYear() + '-' + (mon.getMonth() + 1) + '-' + mon.getDate() + 'T' + mon.getHours() + ':' + mon.getMinutes() + ':' + mon.getSeconds() + 'Z';
camlQuery.set_viewXml('<View><Query><Where><And><Geq><FieldRef Name="Modified" /> ' +
'<Value IncludeTimeValue="TRUE" Type="DateTime">' + fDate + '</Value></Geq><Neq>' +
'<FieldRef Name="ID" /><Value Type="Counter">' + idCountFirst + '</Value></Neq></And></Where><OrderBy>' +
'<FieldRef Name="Modified" Ascending="False" /></OrderBy></Query><RowLimit>5</RowLimit></View>');
}
}
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem, 'Include(Title, FileRef, ID,Modified,AlternateThumbnailUrl,_Comments)');
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
//SP.SOD.executeOrDelayUntilScriptLoaded(DisplayCount, 'SP.js');
function onQuerySucceeded(sender, args) {
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
//alert(oListItem.get_item("AlternateThumbnailUrl").get_url());
var previewImgUrl = null;
var ImgTitle = null;
var ImgDesc = null;
if (oListItem.get_item("AlternateThumbnailUrl") != null) {
previewImgUrl = oListItem.get_item("AlternateThumbnailUrl").get_url();
}
if (previewImgUrl == null) {
previewImgUrl = "/_layouts/images/VideoPreview.png";
}
if (oListItem.get_item("Title") != null) {
ImgTitle = oListItem.get_item("Title");
}
else {
ImgTitle = "";
}
mediaPlayer.createMediaPlayer(
document.getElementById('MediaPlayerHost'),
'MediaPlayerHost',
'362px', '179px',
{
displayMode: 'Inline',
mediaTitle: '',
mediaSource: oListItem.get_item('FileRef'),
previewImageSource: previewImgUrl,
autoPlay: false,
loop: false,
mediaFileExtensions: 'wmv;wma;avi;mpg;mp3;',
silverlightMediaExtensions: 'wmv;wma;mp3;'
});
idCountFirst = oListItem.get_item("ID");
modifiedFirst = oListItem.get_item("Modified");
var imageID = 'image' + count;
var imgHost = document.getElementById('items');
var aTag = document.createElement('a');
aTag.setAttribute('title', ImgTitle);
var newimg = document.createElement('img');
newimg.setAttribute('src', previewImgUrl);
newimg.setAttribute('height', '44px');
newimg.setAttribute('width', '78px');
newimg.setAttribute('class', 'photo');
newimg.setAttribute('id', imageID);
newimg.setAttribute('tag', oListItem.get_item('FileRef') + ";" + previewImgUrl);
newimg.setAttribute('onmouseover', "javascript:SetMediaSourceImage(this)");
newimg.setAttribute('onclick', "javascript:SetMediaSource(this)");
aTag.appendChild(newimg);
imgHost.appendChild(aTag);
count++;
counter++;
break;
}
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
//var previewImgUrl = oListItem.get_item("AlternateThumbnailUrl");
var previewImgUrl = null;
var ImgTitle = null;
var ImgDesc = null;
if (oListItem.get_item("AlternateThumbnailUrl") != null) {
previewImgUrl = oListItem.get_item("AlternateThumbnailUrl").get_url();
}
if (previewImgUrl == null) {
previewImgUrl = "/_layouts/images/VideoPreview.png";
}
if (oListItem.get_item("Title") != null) {
ImgTitle = oListItem.get_item("Title");
}
else {
ImgTitle = "";
}
idCount = oListItem.get_item("ID");
modified = oListItem.get_item("Modified");
var imgHost = document.getElementById('items');
var imageID = 'image' + count;
var aTag = document.createElement('a');
aTag.setAttribute('title', ImgTitle);
var newimg = document.createElement('img');
newimg.setAttribute('src', previewImgUrl);
newimg.setAttribute('height', '44px');
newimg.setAttribute('width', '78px');
newimg.setAttribute('class', 'photo');
newimg.setAttribute('alt', ImgTitle);
//newimg, setAttribute('title', ImgTitle);
newimg.setAttribute('id', imageID);
newimg.setAttribute('tag', oListItem.get_item('FileRef') + ";" + previewImgUrl);
newimg.setAttribute('onmouseover', "javascript:SetMediaSourceImage(this)");
newimg.setAttribute('onclick', "javascript:SetMediaSource(this)");
aTag.appendChild(newimg);
imgHost.appendChild(aTag);
count++;
counter++;
}
if (click == null) {
document.getElementById("pag").innerHTML = (pageCount - 3) + '-' + pageCount + ' of ' + itemCount;
}
// if (counter != 4) {
// document.getElementById('next').disabled = true;
// }
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>