Read Part 1: HTML5 and SharePoint 2010
HTML5 Video
With the help of Javascript programming, you can create your own controls to control the video. This means you can create your own video player, apply different styles to it, add the functionality you want your way. Controls attribute in the video tag allows you to use the default controls in the video player. If you remove this attribute, all you get is a video window (without any controls). You can add your own controls underneath the video window.
1. Open notepad and add following code to it.
| <!DOCTYPE html> |
This is same code that you used in html5_demo.htm in part 1 .
2. Save the file as vplayer.html. Now we are going to make changes to this file and add new code.
3. Add following CSS code between the <head> and </head> tags.
| <STYLE type="text/css"> #position } #mask #vcontrols } .boldbuttons{ }
.buttonwrapper{ </STYLE> |
This CSS code will be used to stylize the video player. You can write your own style sheet to add more style to the video player and the controls. You can also create different skins and apply them dynamically to the player. Discussing that is beyond the scope of this article. Our goal is to run HTML5 code in SharePoint 2010.
4. Replace the following code with new code (shown below):
<video id="video1" controls>
<source src="HTML5_Video_Player_Demo_File.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
| <section> <source src="HTML5_Video_Player_Demo_File.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <div id="bar"> <div id="vcontrols"> <button onclick="play()" class="boldbuttons"><span class="buttonspan">Play</span></button> </div> </div> |
New Code
We have given an ID to the video tag. This ID is used in the Javascript code. We have added five buttons under the video tag. These buttons are as following:
1. Play: To play the video
2. Pause: To pause the video. Video resumes from the same place where it was stopped when played again.
3. Stop: To stop the video. Video starts from the start when played again.
4. Fast: To increase the speed of the video. Video returns to normal speed when Play button is clicked.
5. Slow: To reduce the speed of the video. Video returns to normal speed when Play button is clicked.
Each button has a function attached to it. Function is called when click event is fired. The outer <div> (<div id="bar"> is used to draw a solid border. The inner <div> (<div id="position">) is used to indicate the current playback position. When video playback is under way, the <video> tag triggers the onTimeUpdate event continuously. You call progressBar() function to update the progress bar.
5. Javascipt functions are given below. Copy them where section ends (after </section>tag).
| <script type="text/javascript"> function progressBar() var status=document.getElementById("progress"); position.style.width = (video.currentTime/video.duration * 100) + "%"; //status.innerHTML = (Math.round(video.currentTime*100)/100) + " sec"; } function play() var video=document.getElementById("video1"); }
var video=document.getElementById("video1"); }
var video=document.getElementById("video1"); } function fast() var video=document.getElementById("video1"); } function slow() var video=document.getElementById("video1"); } function normal() var video=document.getElementById("video1"); } </script> |
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Replace it with the following:
<!DOCTYPE html>
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.
Posts
