Video Player for SharePoint 2013 and Office 365

When needing to include some media content for a SharePoint 2013 site, there is an out-of-the-box video player that uses the new HTML5 VIDEO tag.

NB. I’m using the Public-Facing Anonymous website that is part of Office 365.

Choose a video :

image

Video player :

image

This is ‘nice’ – but is a little lacking – and not a good solution for a public facing site (anonymous) – and doesn’t play on an iPhone (FAIL !)

Alternative HTML5 video player

After some looking around, the best solution I’ve found is an extension to the HTML5 VIDEO tag – making use of the very-awesome, open-source – AND free – VIDEO.JS plug-in (just check the website link for a sample).

This uses some JavaScript to include some controls – and – works across browser, and most importantly, on an iPad/iPhone.

The steps I took were as follows :

(1) Get the files for VIDEO.JS 

I chose to download, and save these to STYLE LIBRARY – just to have them hosted on my site – rather than use the CDN – right-click and SAVE these files :

  1. video.js    (JavaScript)
  2. video-js.css    (CSS)
  3. video-js.swf    (Flash Plug-in)

 

Upload the above files to STYLE LIBRARY.

(2) Load the files to SharePoint 2013

You’ll also need to upload the following :

  • Video file – well, derrrr…       I’m using an MP4
  • JPG for the preview image – known as the ‘poster’ for VIDEO.JS

I put these last few files into SITE ASSETS

(3) Add the SCRIPT for the video player

On the page you want to show the video, include an “Embed Code” webpart.

Here’s the tags you need for the JS, CSS and SWF :

<link href=”/Style%20Library/video-js.css” rel=”stylesheet”></link>

<script type=”text/javascript” src=”/Style%20Library/video.js”></script>

<script>

videojs.options.flash.swf = “/Style%20Library/video-js.swf”

</script>

(4) Include the VIDEO tag

I had to tweak and fine-tune the examples from the site for VIDEO.JS.

With regard to the VIDEO tag for SharePoint – or more specifically, the “Embed Code” dialog/editor strips out some tags/text – specifically the ‘controls’ tag.

HTML5 allows you to have the attribute controls which implies a default of ‘True’.  

SharePoint will remove that – so you have to explicitly set controls=’true’.

The other piece was the surrounding DIV to make sure that the ‘overflow’ was hidden – otherwise, the Safari browser on iOS will display the window the same size as the original video dimensions – irrespective of the size entered.

Here’s the HTML you’ll need :

<div style=”width:576;height:324;overflow-x:hidden;overflow-y:hidden;”>

<video id=”SPvideo” class=”video-js vjs-default-skin vjs-big-play-centered” preload=”auto” data-setup=”{‘example_option’:true}” controls=”true” poster=”/SiteAssets/VideoPreviewFrame.jpg” height=”324” width=”576“>
<source type=”video/mp4″ src=”/SiteAssets/MyCoolVideo.mp4“>
</video>

</div>

(5)  Change if you need

Of course, you can tweak and fine-tune as you need – with regard to :

  • Width + Height – make the outer DIV the same as the VIDEO tag (obviously)
  • Poster – I just did a screenshot of the video (full screen), and resized it to be the same width/height – 576×324 for my example
  • The URL to the video of course – you can try with a WEBM format, or whichever you like, according to the HTML5 VIDEO tag.
  • CSS and other bits
  • Any other VIDEO.JS extensions and such – check the DOCS + API reference.

(6) The final product

After I’d implemented the above, the player looks like this :

image

This is within an anonymous site on Office365 – just make sure you ‘publish’ the files for CSS, JS and SWF.

The player on iOS shows the preview image, and then uses the iPhone video player.

Good luck – let me know if this helps – pls. leave me a comment.

🙂

Advertisements

2 thoughts on “Video Player for SharePoint 2013 and Office 365

  1. This is so so so so helpful. Thank you so much. It’s such a pain, and typical MICROSOFT that the W3C and so on create standards for everyone to use such as the HTML5 video tag and then MSFT create a MICROSOFT-ONLY way of doing things, in order to make money of course, which we then have to find ways of working around so our content works across devices and platforms.

    This doesn’t make MICROSOFT money; it makes them EVIL.

    Like

  2. Not sure if you got my comment already. But thank you so much; really really helpful. And boo Microsoft for their money-making antics which don’t make them money they just make them evil.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s