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.

 

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.

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).

 

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).

• oceans-clip.png or oceans-clip.png
• oceans-clip.mp4 or oceans-clip.mp4
• oceans-clip.webm or oceans-clip.webm
• oceans-clip.ogv or oceans-clip.ogv
• demo.captions.vtt

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

 

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

 

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>

 

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

 

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>