by Andreas

HTML 5 video in Sharepoint 2010

For those who want video support in their Sharepoint site there’s finally a very easy way to do this that doesn’t depend on the Silverlight media player. It’s all done using HTML 5 and an excellent video player called VideoJS (http://videojs.com/).

Pre-req: check my previos post about how to run HTML 5 in Sharepoint here. This part is required for it to work, and I am not covering it in this post.

Download the video-js-2.0.2 library (present version at the time of this post). There are three files of interest: demo.html, video.js and video-js.css.

1. View the demo.html file in your browser to verify that it works

2. Upload the .js and .css files to your Sharepoint site assets library (or wherever else you feel like storing it)

3. Open the source of the demo.html and copy the entire contents to your clipboard

4. Create a new Content Editor Webpart on your Sharepoint page, and open up the content HTML editor (this was also covered in that previous post). Paste in the demo.html source, and update the two source references to your asset files! You have to update both the .js and the .css. (My .js path was  <script src="/HTML5/SiteAssets/video.js").  Click OK.

5. How about that:

image

If you encounter any errors my guesses are:

1. You didnt alter the masterpage like i described in that previous post (you won’t get the link again!)

2. You are viewing your Sharepoint site in an OLD BROWSER (IE 9 required, or the latest version of Chrome, Safari or Firefox)

3. Your references to video.js and video-js.css are wrong. My site was called HTML5, and had a library called SiteAssets directly at the root level and gave me the path <script src="/HTML5/SiteAssets/video.js"

by Andreas

HTML 5 in Sharepoint 2010

Can it be done? Sure it can! But it requires a few minor adjustments..

1. Alter your master page to allow HTML5

Edit the masterpage of your site in Sharepoint Designer. Locate the following tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Simply remove everything behind “html” except the closing tag:

<!DOCTYPE html>

 

2. Remove forced IE 8 rendering

Your masterpage has a tag that pretty much says “Force this page to be rendered as an IE 8 browser would”. But IE 8 doesn’t support HTML 5 so get rid of it – delete the following line from your masterpage:

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

 

3. Back in your Sharepoint site, add a new Content Editor webpart on the page where you want the magic of HTML 5 to be displayed. Open the HTML editor for the contents (you’ll find it up at the ribbon, looks a little something like this:

image

 

4. Put your HTML 5 code into the HTML Source window that appears, click OK and Bob’s your uncle!