Skip to main content

Video Carousel In SharePoint

Play Multiple Videos Continuously in a SharePoint Page

Please follow below steps to do,

Step 1 : Create a "Assets" Media Library in SharePoint.
Step 2 : Download "video-js.css" , "video.js" & "jquery-3.3.1.min.js" from Google Drive(https://drive.google.com/open?id=1iMXZ_vVK6pWec4id7xwjSl35S29uPcud)
Step 3 : Create a HTML file and update your HTML code(VideoCarousel.HTML)
Step 4 : Add HTML file into SharePoint Page via Content Editor Webpart.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
<html>
<head>
<link href="https://PravahamInfo.sharepoint.com/sites/Home/Style Library/VideoCarousel/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://PravahamInfo.sharepoint.com/sites/Home/Style Library/VideoCarousel/video.js"></script>
<script src="https://PravahamInfo.sharepoint.com/sites/Home/Style Library/VideoCarousel/jquery-3.3.1.min.js"></script>
<style>
.video-holder .vjs-big-play-button
{
left: 50%;
width: 100px;
margin-left: -50px;
height: 80px;
top: 50%;
margin-top: -40px;
}
/* CUSTOM BUTTONS */
[class^="icon-"]:before, [class*=" icon-"]:before
{
font-family: VideoJS;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
.icon-angle-left:before
{
content: "\f120";
font-size: 2em;
margin-top: 2px;
}
.icon-angle-right:before
{
content: "\f11f";
font-size: 2em;
margin-top: 2px;
}
.video-js .icon-angle-right, .video-js .icon-angle-left
{
cursor: pointer;
-webkit-box-flex: none;
-moz-box-flex: none;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
</style>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>Video Player</h2>
<video id="myplayer" class="video-js" controls preload="auto" width="1200" height="700" data-setup="{}" muted="muted">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</body>
</html>
<script type="text/javascript">
var videoList = [];
var index = -1;
$(document).ready
(
function ()
{
//videoList.push("https://PravahamInfo.sharepoint.com/sites/Home/Assets/Video Short/Video Short.mp4");
//videoList.push("https://PravahamInfo.sharepoint.com/sites/Home/Assets/Youtube 1/Youtube 1.mp4");
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/GetFolderByServerRelativeUrl('Assets')?$expand=Folders,Files";
var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
/// set request data
var queryText ="<Where><Eq><FieldRef Name='FSObjType' /><Value Type='Integer'>0</Value></Eq></Where>";
var folderUrl ="";
var viewXml = '<View Scope="RecursiveAll" ><Query>' + queryText + '</Query></View>';
var queryPayload = {
'query' : {
'__metadata': { 'type': 'SP.CamlQuery' },
'ViewXml' : viewXml,
}
};
/// make an ajax call
listName ="Assets"
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl +"/_api/web/lists/GetByTitle('"+ listName +"')/GetItems?$select=*,Properties,FieldValuesAsHtml,ServerRelativeUrl&$expand=File,Properties,FieldValuesAsHtml",
method: "POST",
data: JSON.stringify(queryPayload),
async:false,
headers: {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
'content-type': 'application/json;odata=verbose',
'accept': 'application/json;odata=verbose'
},
success: function (response) {
///do your code
var results = response.d.results;
$.each(results,function(i,e){
var fileurl = e.File.ServerRelativeUrl;
videoList.push(fileurl);
});
},
error: function (data) {
///do your code
}
});
var Button = videojs.getComponent('Button');
/* ADD PREVIOUS */
var PrevButton = videojs.extend(Button, {
constructor: function() {
Button.apply(this, arguments);
this.addClass('icon-angle-left');
this.controlText("Previous");
},
handleClick: function() {
PlayPrevious()
}
});
/* ADD NEXT */
var NextButton = videojs.extend(Button, {
constructor: function() {
Button.apply(this, arguments);
this.addClass('icon-angle-right');
this.controlText("Next");
},
handleClick: function() {
PlayNext();
}
});
// Register the new component
videojs.registerComponent('NextButton', NextButton);
videojs.registerComponent('PrevButton', PrevButton);
var player = videojs('myplayer');
player.getChild('controlBar').addChild('PrevButton', {}, 0);
player.getChild('controlBar').addChild('NextButton', {});
player.on
(
'ended',
function()
{
PlayNext();
}
);
PlayNext();
}
);
function PlayNext()
{
index = index+1;
if(index >= videoList.length)
index = 0;
var player = videojs('myplayer');
player.src(videoList[index]);
player.ready(function() {
player.play();
});
}
function PlayPrevious()
{
index = index-1;
if(index < 0)
index = videoList.length - 1;
var player = videojs('myplayer');
player.src(videoList[index]);
player.ready(function() {
player.play();
});
}
</script>
Output :

Comments

  1. Angular JS TrainingOctober 13, 2018 at 4:19 AM

    Great article ...Thanks for your great information, the contents are quiet interesting.
    SharePoint Online Training

    ReplyDelete

Post a Comment

Popular posts from this blog

Tab Control in Asp.Net

Scenerio: I need your help in designing tab control in   asp.net .My requirement is I need a tab control in   asp.net (C#) like  for example goto my computer ,right click c drive and select properties.we get tabs like general,security etc....... like that i need to design one tab control(no need of any rightclick) in my web page and the database table columns should come as tabs and inseide the tab data of that particular column should come.   Example:Employee master tab1:Employee name.........his name in the tab tab2:Age.............his age tab3:Address........his address   Solution:   You can do this using a simple div <style type="text/css"> .tabs         {             position: relative;             height: 20px;             margin: 0;   ...
Post a Comment
Read more

AI and Microsoft: Revolutionizing Efficiency in Nonprofit Organizations

  How AI and Microsoft Enhance Efficiency in Nonprofit Organizations In today’s fast-paced world, nonprofit organizations face unique challenges—limited resources, increasing demands, and the constant need to do more with less. But what if technology could be the game-changer they need? In my latest research paper,  "How AI and Microsoft Enhance Efficiency in Nonprofit Organizations" , I explore how cutting-edge technologies like Artificial Intelligence (AI) and Microsoft’s innovative tools are revolutionizing the way nonprofits operate. From streamlining administrative tasks to enhancing donor engagement and optimizing resource allocation, AI and Microsoft’s solutions are empowering nonprofits to focus on what truly matters—their mission. This paper dives deep into real-world examples, practical applications, and the transformative potential of these technologies. Whether you’re a nonprofit professional, a tech enthusiast, or simply curious about the intersection of technolo...
Post a Comment
Read more

Social tagging overview in Sharepoint 2010

A tag is a word or phrase that identifies an individual piece of information according to a set of attributes or criteria. Tags make it easy to find and share information about a specific subject or task. Social tagging helps users categorize information in ways that are meaningful to them. Social tagging can improve the quality of search results by filtering against specific tags, and it can also connect individuals who want to share information with other users who have like interests. This article describes the social tagging features in Microsoft SharePoint Server 2010. This article does not describe how to configure social tagging features. It also does not discuss how to implement social tagging features as part of an overall social media strategy for an enterprise. About using social tagging features Social tagging features help users to share information and to retrieve relevant, high-quality content more efficiently. Such sharing encourages collaboration and b...
295 comments
Read more