Video Gallery using SharePoint Asset Library and MVC APP


Krishna KV
Team Leader, Aspire Systems
Published On :   15 Aug 2016
Visit Count
Today :  6    Total :   7946
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

SharePoint Office 365 Tool
Simple & Powerful Tool for Migration, Security & Reporting. Free Trial


SharePoint asset library allows us to upload images, videos, audio and any kind of cataloging rich media asset with a thumbnail preview. It has the content type with Picture Size, Date Picture taken, Tagging, Duration in seconds. The video thumbnail can be generated by the video uploaded or any custom images. The asset library will not support the slide show of the picture.

To Add an asset library

clip_image002

Create a provided hosted app

Video.cs

 public class Video
 {
 	public string Title { get; set; }
 	public string Url { get; set; }
 	public string Preview { get; set; }
 
 }
 

HomeController.cs

 [SharePointContextFilter]
         public ActionResult Index()
         {
             
             List<Video> lstVideos = new List<Video>();
             User spUser = null;
 
             var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
 
             using (var client = spContext.CreateUserClientContextForSPHost())
             {
                 if (client != null)
                 {
                     Uri uri=new Uri(spContext.SPHostUrl.AbsoluteUri);
                     var rootPath = uri.GetLeftPart(UriPartial.Authority);
                     var web = client.Web;
                     var list = web.Lists.GetByTitle("AstLibrary");
                     var listItem = list.GetItems(new CamlQuery());
                    
                     client.Load(listItem, i => i.IncludeWithDefaultProperties(s => s.Folder.Files));
                     client.ExecuteQuery();
                     foreach (var item in listItem)
                     {
                         var preview = item.FieldValues["AlternateThumbnailUrl"];
                         lstVideos.Add(new Video()
                         {
                             Title = item["Title"].ToString(),
                             Preview = preview==null ?null: (preview as FieldUrlValue).Url,
            Url =string.Format("{0}{1}",rootPath,item.Folder.Files[0].ServerRelativeUrl)
 
                         });
                     }
                 }
             }
 
             return View(lstVideos);
         }
 
 

Index.cshtml

 @model List<ProvidedHosted.Video>
 <div class="row">
     @foreach (var lst in Model)
     {
         <div class="col-sm-6">
             <video width="480" height="400" poster="@lst.Preview" controls="true">
                 <source src="@lst.Url" type="video/mp4" />
             </video>
         </div>
     }
 </div>
 

Upload a Video

clip_image003

Generating thumbnails from the uploaded video

­clip_image005

clip_image006

Click the Save button to update the thumbnails

Run the project the output will displayed below

clip_image008

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

KWizCom Touch