Add Video Player To SharePoint Content Editor WebPart Programmatically Using Server-Side Object Model

Introduction

You can add media such as video, audio or an image to a SharePoint page. The media file can come from your computer, from SharePoint, or from another location such as a file share. There are several different ways you can add video clips to a SharePoint page when you edit the page in the browser. You can add a video player to the page to play an individual video file. In this article I will explain, how to add Video Player to SharePoint Content Editor WebPart programmatically, using Server-Side Object Model. This will be applicable for all SharePoint On Premise platforms.

Pre-Requisites

1. Open Visual Studio.
2. Open New Project dialog box. Expand Office/SharePoint node and then choose SharePoint Solutions.
   
   
   
   
3. Choose the SharePoint 2013 – Empty Project template. Name the project as MediaProject.
   
   
   
   
4. Choose the Deploy as a farm solution option button and choose Finish button.
   
   
   
   
5. To create an Application page, choose MediaProject project.
   
   
   
   
6. On the menu bar, choose Project-> Add New Item.
   
   
   
   
7. In the Add New Item dialog box, choose the Application Page template.
   
   
   
   
8. Name the page AddMediaWebPart and choose Add button.

Add Video Player

1. Open AddMediaWebPart.aspx file, we created.
   
   
   
   
2. Add the three text boxes for Page URL, Image URL and Video URL and one Submit button control to the PlaceHolderMain content control.
   

   
   <h4>Add Video Player</h4>
   <div>
       <label for="pageURL">
           <span class="required">*</span>Page URL:
       </label>
       <input type="text" id="pageURL" runat="server" />
       <label for="imageURL">
           <span class="required">*</span>Image URL:
       </label>
       <input type="text" id="imageURL" runat="server" />
       <label for="videoURL">
           <span class="required">*</span>Video URL:
       </label>
       <input type="text" id="videoURL" runat="server" />
   </div>
   <div>
       <button type="button" class="submit" id="AddWebPartSubmit" onserverclick="AddWebPartSubmitClick" runat="server">
           <span>
               <span>Submit</span>
           </span>
       </button>
   </div>

   
   
   
3. Open AddMediaWebPart.aspx.cs file.
   
   
   
   
4. Add the references, given below-
   

   using System;
   using Microsoft.SharePoint;
   using Microsoft.SharePoint.WebControls;
   using Microsoft.SharePoint.WebPartPages;
   using System.Xml;
   using Microsoft.SharePoint.Publishing.WebControls;
   using System.Web.UI.WebControls.WebParts;

5. Add AddWebPartSubmitClick event receiver for Submit button.
   

   protected void AddWebPartSubmitClick(object sender, EventArgs e) {}

6. Open the site and Web, using SPSite and SPWeb object.
   
   
7. Check out the page and add Media Webpart.
   
   
8. Access the Webparts place holder on the page by creating SPLimitedWebPartManager object.
   
   
9. Create Content Editor Webpart and add HTML5 Video tag to the content of Content Editor Webpart.
   
   
10. Set an image URL to poster attribute and video URL to source src attribute.
    
    
11. AutoPlay option has been added to the video tag to auto play the video.
    

    try {
        using(SPSite site = new SPSite(pageURL.Value)) {
            using(SPWeb web = site.OpenWeb()) {
                SPLimitedWebPartManager webParts = null;
                webParts = web.GetLimitedWebPartManager(pageURL.Value, PersonalizationScope.Shared);
                //Adding Media WebPart
                ContentEditorWebPart contentEditorWPforMedia = new ContentEditorWebPart();
                XmlDocument addNewXMLDocforMedia = new XmlDocument();
                XmlElement contentXMLElementforMedia = addNewXMLDocforMedia.CreateElement("VideoContent");
                contentXMLElementforMedia.InnerXml = "<![CDATA[<video width='640' height='360' poster='" + imageURL.Value + "' controls='controls' autoplay>" + "<source src='" + videoURL.Value + "' type='video/mp4' /> " + "Your browser does not support the video tag." + "</video>]]>";
                contentXMLElementforMedia.InnerText = "<video width='640' height='360' poster='" + imageURL.Value + "' controls='controls' autoplay>" + "<source src='" + videoURL.Value + "' type='video/mp4' /> " + "Your browser does not support the video tag." + "</video>";
                contentEditorWPforMedia.Content = contentXMLElementforMedia;
                contentEditorWPforMedia.ChromeType = System.Web.UI.WebControls.WebParts.PartChromeType.None;
                contentEditorWPforMedia.Content.InnerText = contentXMLElementforMedia.InnerText;
                webParts.AddWebPart(contentEditorWPforMedia, "BlankContent", 1);
                webParts.SaveChanges(contentEditorWPforMedia);
            }
        }
    } catch (Exception ex) {
        //Log the errors
    }

12. Add the Media Webpart and save the page changes.
    
    
13. Check in the page changes.
    
    
14. Deploy the solution.
    
    
15. Open the layouts AddMediaWebPart.aspx page, which we created.
    
    
    
    
16. Enter the Page URL, Image URL and Video URL values.
    
    
17. Open the page and check the Video player is added to the page. Click Play button to play the video.
    
    
    

Summary

Thus, you have learned, how to add Video Player to SharePoint Content Editor WebPart programmatically, using Server-Side Object Model.