HTML5 video player in SharePoint 2010 and SharePoint 2013 (on-premises)

I am writing this article because I recently had to troubleshoot a similar request and I noticed a lot of SharePoint admins / users encounter problems when they deploy the HTML5 video player on SharePoint (on-premises).
So, this article addresses to those who want to host the video files and the HTML5 video player into their SharePoint site.
Video.js is a popular open source HTML5 video player. This player works with the top used browsers + mobile devices (iPhone, iPad, Android, …).

 

I will present what you need to do step by step (Video.js + SharePoint 2010). For SharePoint 2013 you need to follow similar steps.

 

Pre-requirements (server settings)
(Very important! Check with the IT administrators if the following settings are applied properly – especially for the SP2013 setups.)

1. Verify if IIS has the MIME Types properly configured for .mp4, .ogv, .webm.
HTML5_Video_Player_in_SP2010_and_SP_2013_01

HTML5_Video_Player_in_SP2010_and_SP_2013_02

HTML5_Video_Player_in_SP2010_and_SP_2013_03

HTML5_Video_Player_in_SP2010_and_SP_2013_04

 

2. Enable the Blob Cache in SharePoint.
Here is an explanation of what SharePoint blob caching is. Example of BlobCache settings that can be used.

...
...
<BlobCache location="D:\SPS\BlobCache" path="\.(gif|jpg|jpeg|jpe|jfif|bmp|dib|tif|tiff|ico|png|wdp|hdp|css|js|asf|avi|flv|m4v|mov|mp3|mp4|mpeg|mpg|ogv|rm|rmvb|webm|wma|wmv)$" maxSize="3" enabled="true" />
...
...

 

 

 

Implementation
1. Download Video.js from http://www.videojs.com/ and unzip the files to your computer.
HTML5_Video_Player_in_SP2010_and_SP_2013_05

2. In your SharePoint site go to your Style Library document library, create a folder, name it video-js and upload the following files and folders:

  • font (folder)
  • lang (folder)
  • video.js
  • video-js.css
  • video-js.less
  • video-js.min.css
  • video-js.swf

Specific to SharePoint 2013 – please check-in the uploaded files (the default settings of Style Library requires documents to be checked-in).
HTML5_Video_Player_in_SP2010_and_SP_2013_06

HTML5_Video_Player_in_SP2010_and_SP_2013_07

 

3. Next step it will be to host / upload your videos, poster images, captions and subtitles associated into your Media document library.
If you need a sample, you can use the following files (please make sure you right click and “Save as” the following files).

(I am hosting the sample files on this site because I cannot guarantee the sample files from videojs.com will not be removed.)
HTML5_Video_Player_in_SP2010_and_SP_2013_08

HTML5_Video_Player_in_SP2010_and_SP_2013_09

 

4.1. SharePoint 2010 way – HTML Form Web Part – Insert the HTML5 video player into your page.
HTML5_Video_Player_in_SP2010_and_SP_2013_10

 

Add the following HTML code to your webpart.

<link href="../Style%20Library/video-js/video-js.css" rel="stylesheet"></link>
<script type="text/javascript" src="../Style%20Library/video-js/video.js"></script>
<script>videojs.options.flash.swf = "../Style%20Library/video-js/video-js.swf"</script>




<div style="width:640;height:264;overflow-x:hidden;overflow-y:hidden;">
<video id="example_video_2" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="../Media/oceans-clip.png" data-setup="{}">
<source src="../Media/oceans-clip.mp4" type='video/mp4' />
<source src="../Media/oceans-clip.webm" type='video/webm' />
<source src="../Media/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="../Media/demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="../Media/demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->


To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>

</video>
</div>



HTML5_Video_Player_in_SP2010_and_SP_2013_11

HTML5_Video_Player_in_SP2010_and_SP_2013_12

HTML5_Video_Player_in_SP2010_and_SP_2013_13

HTML5_Video_Player_in_SP2010_and_SP_2013_14

 

4.2. SharePoint 2013 way – Script Editor web part – Insert the HTML5 video player into your page.
HTML5_Video_Player_in_SP2010_and_SP_2013_15

 

Add the following HTML code to your webpart.

<link href="../Style%20Library/video-js/video-js.css" rel="stylesheet"></link>
<script type="text/javascript" src="../Style%20Library/video-js/video.js"></script>
<script>videojs.options.flash.swf = "../Style%20Library/video-js/video-js.swf"</script>




<div style="width:640;height:264;overflow-x:hidden;overflow-y:hidden;">
<video id="example_video_2" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="../Media/oceans-clip.png" data-setup="{}">
<source src="../Media/oceans-clip.mp4" type='video/mp4' />
<source src="../Media/oceans-clip.webm" type='video/webm' />
<source src="../Media/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="../Media/demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="../Media/demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->


To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>

</video>
</div>



HTML5_Video_Player_in_SP2010_and_SP_2013_16

HTML5_Video_Player_in_SP2010_and_SP_2013_17

HTML5_Video_Player_in_SP2010_and_SP_2013_18

 

3 thoughts on “HTML5 video player in SharePoint 2010 and SharePoint 2013 (on-premises)”

Leave a Reply