Post
Ask Question

Bind Video From Remote Server To SharePoint WebPart

In this blog we will see how to bind video from remote server using web part properties. Recently I faced an issue that big (more than 500 MB) videos are not playing properly or sometimes it shows only blank screen from SharePoint library.

After discussing it with the team we found the below solution. For this I have placed video in apache sever and fetched the video from server. I have done this using visual web part in SharePoint. After binding link in web part properties it gets that video from server.

Below are the steps that I have performed.
  1. Open visual stuido using run as Administrator mode -> Click on file -> add new project -> give name to the project -> after creation of project -> right click to to the project -> add new item -> select visual web part.

  2. Open .ascx file and add below code into it
    1. <style>  
    2.     .VideoDiv {  
    3.         margin: 0px auto;  
    4.         width: 500px;  
    5.     }  
    6.   
    7.     .pVideo {  
    8.         width: 500px;  
    9.     }  
    10. </style>  
    11. <div class="VideoDiv" id="VideoDiv" runat="server"> </div>  
  3. Open .ascx.cs file and add below code into it.
    1. public string IndiaURL {  
    2.     get;  
    3.     set;  
    4. }  
    5. public string PosterURL {  
    6.     get;  
    7.     set;  
    8. }  
    9. protected void Page_Load(object sender, EventArgs e) {  
    10.     string FullIpAddress = string.Empty;  
    11.     FullIpAddress = GetLanIPAddress().Replace("::ffff:", "");  
    12.     string[] split = FullIpAddress.Split('.');  
    13.     StringBuilder VideoStrBuilder = new StringBuilder();  
    14.     VideoStrBuilder.Append("<video poster='" + PosterURL + "' src='" + IndiaURL + "' controls='true' class='pVideo'>");  
    15.     VideoStrBuilder.Append("</video>");  
    16.     VideoDiv.InnerHtml = VideoStrBuilder.ToString();  
    17. }  
    18. /* 
    19. Method to get the IP Address of the User 
    20. */  
    21. public String GetLanIPAddress() {  
    22.     //The X-Forwarded-For (XFF) HTTP header field is a de facto standard for identifying the originating IP address of a  
    23.     //client connecting to a web server through an HTTP proxy or load balancer  
    24.     String ip = HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_FOR"];  
    25.     if (string.IsNullOrEmpty(ip)) {  
    26.         ip = HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"];  
    27.     }  
    28.     return ip;  
    29. }  
  4. Open .cs file and add below code in to class
    1. // Visual Studio might automatically update this path when you change the Visual Web Part project item.  
    2. private  
    3. const string _ascxPath = @ "~/_CONTROLTEMPLATES/15/Project/Videos/VideosUserControl.ascx";  
    4. [Personalizable(PersonalizationScope.Shared)]  
    5. [WebBrowsable(true)]  
    6. [Category("Custom Property")]  
    7. [WebDisplayName("India URL")]  
    8. [Description("India Video Server URL")]  
    9. public string ProIndUrl {  
    10.     get;  
    11.     set;  
    12. }  
    13. [Personalizable(PersonalizationScope.Shared)]  
    14. [WebBrowsable(true)]  
    15. [Category("Custom Property")]  
    16. [WebDisplayName("Poster URL")]  
    17. [Description("Video Poster URL")]  
    18. public string ProPosterURL {  
    19.     get;  
    20.     set;  
    21. }  
    22. protected override void CreateChildControls() {  
    23.     //Control control = Page.LoadControl(_ascxPath);  
    24.     var control = (VideosUserControl) Page.LoadControl(_ascxPath);  
    25.     control.IndiaURL = ProIndUrl;  
    26.     control.PosterURL = ProPosterURL;  
    27.     Controls.Add(control);  
    28. }  
  5. Build and check for errors if no error is found then deploy the project.
  6. Create one web part page and above web part into it
  7. Now edit the web part set the remote server url and give path of that video.
  8. Save it and you will see that video plays quickly as compares to SharePoint document library 
Thank you.