HTML5 Video and SharePoint 2010

5. Javascipt functions are given below. Copy them where section ends (after ****tag).

Code is pretty straight forward and self-explanatory. progressBar() function is used to create the progress bar. normal() function is not being used as it served the same purpose as offerred by the Play button. We use document.getElementById() to get hold of the video tag.

Save the file again. You can download complete html page from the following link:

http://www.walisystemsinc.com/sharepoint/art/html5_p2/vplayer.zip (zip format)

You can download the video used in this demo from the following link:

http://walisystemsinc.com/sharepoint/art/html5/HTML5_Video_Player_Demo_File.zip (zip format)

Copy the video file to the same folder that contains the html file. If you want to use your own video, just change the video path in the src attribute in the code.

Using HTML5 in SharePoint 2010

Finally, time to take the HTML5 code to SharePoint, the step you were waiting for so anxiously!

6. There are two ways to write HTML5 code in SharePoint 2010. First is to use a content editor web part and second is to write the code directly inside a SharePoint page. We will cover both approaches below. First let’s try the content editor approach. Before you start experimenting, you will create a new master page. You will work with the new master page instead of modifying the default one. Open your SharePoint site. Click Site Actions and select Site Settings.

7. From Galleries section, select Master pages and page layouts.

Figure 1: Master pages and page layouts

Please note that my screenshots will look slightly different because of the background color that I have used in my master page. You will see a white background.

8. Locate v4.master and select it. Hover your mouse over it, an arrow will appear. Click it to open the menu. Select Send To > Download a Copy. Save copy to your hard disk. Save it as v4copy.master.

9. On the same page Master pages and page layouts, click Upload Document button in the ribbon to upload the new master page to the gallery.

10. Browser to the folder where you saved v4copy.master and select the new master page. Click OK.

Figure 2: New master page properties

In Content Type, select Publishing Master Page. UI Version should be 4. Click Save to save the changes.

11. Check In the file if it is checked out. Select v4copy.master in the list. To Check in, select v4copy.master from the list. Open menu and select Check In. After checking in, from the same menu, select Publish a Major Version.

Figure 3: Publish a Major Version

12. Enter comments in the Comments box. You can leave it empty if you want and click OK.

13. After publishing, open same menu again and select Approve/Reject.

Figure 4: Approve/Reject

14. Select Approved and click Ok.

Figure 5: Approve the newly published Master page

Use new Master Page

15. In your SharePoint site, click Site Actions and select Site Settings.

16. In Look and Feel section, click Master page. If you don’t see Master page option, the reason is you have not enabled publishing feature in your site. I discussed this on my blog. To enable it, go to Site Actions > Site Settings. Under Site Actions, click Manage site features. Enable SharePoint Server Publishing. Now you will see Master page option.

17. In Site Master Page section, select v4copy.master from the drop down. Check Reset all subsites to inherit this site master page setting checkbox.

18. In System Master Page section, select v4copy.master from the drop down and check Reset all subsites to inherit this system master page setting checkbox.

19. In Alternate CSS URL, select option Use Microsoft SharePoint Foundation default styles and check Reset all subsites to inherit this alternate CSS URL checkbox. Usually we create a new CSS to use with new master page but because we are not trying to brand the site and our goal is to use a back up copy of the original master, we will use the default CSS. Click OK to save the changes.

Figure 6: Use new Master page

20. Now it’s time to edit the master page. Open your site in SharePoint Designer 2010.

21. From left side menu, select Master Pages. On the right side, you will see a list of pages. Click v4copy.master.

Figure 7: Open Master page in SharePoint Designer 2010

22. Click Edit file link under Customization.

23. v4copy.master page will open. Scroll to the top and locate the following tag:

Replace it with the following:

24. Further two lines below, you will see following line:

<meta http-equiv= “X-UA-Compatible”content=“IE=8”/>

Delete thie line. Removal of this tag will allow SharePoint to render the page in IE 9. Save master page.

25. Open your SharePoint site in browser. Click Site Actions. Select Edit Page. Under Editing Tools, select Inserttab.

Figure 8: Add web part

26. Click Web Part button.

27. In Categories box, select Media and Content. In Web Parts box, select Content Editor. Click Add button.

28. Now that you have added the Content Editor web part, there are two ways to add HTML5 code. One is to create a site in IIS to host the html page and then provide the site link in the Content Editor web part. Second is to add the HTML5 code directly in the web part. Let’s explore both options below.

29. Let’s try the IIS option first. Create a site in IIS and point it to the folder that contains the html file. Test the link in the browser. Now, edit the web part and add the link in the Content Link box. Click OK to apply the change.

Figure 9: Add link in Content Editor

30. Click Save & Close button in the ribbon to save the page.

31. Test the code. Click Play button in the player to play the video. Following screenshot shows how the video player looks inside a SharePoint 2010 page.

Figure 10: Video Player in Action inside SharePoint 2010 page

32. This was the first option. Now, let’s try the second option. Edit the web part again and remove the link from Content Link field. Click OK.

33. Again, edit the web part by opening the menu from inside the web part.

Figure 11: Edit web part

34. Click Click here to add new contentlink.

Figure 12: Add HTML5 code

35. Click HTML button in the ribbon and select Edit HTML Source option.

Figure 13: Edit HTML Source

36. This will open HTML Source editor. Open html file in notepad and copy all content and paste it in the HTML Source editor and click OK.

Figure 14: HTML Source editor

37. Click OK in the Content Editor to save the changes.

That’s it. To see how this custom built HTML5 video player looks in SharePoint 2010, click the image below. It will load the video from youtube.com in iframe.

[youtube http://www.youtube.com/watch?v=nFUJo4NpOnQ]

Click image to see video of HTML5 video player in action inside SharePoint 2010

To download this demo clip in zip format to your machine, click here

To download or view this demo clip (in wmv format) directly from our site, click here.

To view it on youtube.com, click here.