\nSo, this article addresses to those who want to host the video files and the HTML5 video player into their SharePoint site.
\nVideo.js is a popular open source HTML5 video player. This player works<\/a> with the top used browsers + mobile devices (iPhone, iPad, Android, \u2026).<\/p>\n
<\/p>\n
I will present what you need to do step by step (Video.js + SharePoint 2010). For SharePoint 2013 you need to follow similar steps.<\/p>\n
<\/p>\n
Pre-requirements (server settings)<\/span><\/strong> 1.<\/strong> Verify if IIS has the MIME Types properly configured for .mp4, .ogv, .webm. <\/p>\n 2.<\/strong> Enable the Blob Cache in SharePoint. <\/p>\n <\/p>\n <\/p>\n Implementation<\/span><\/strong> 2.<\/strong> 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:<\/p>\n Specific to SharePoint 2013 – please check-in the uploaded files (the default settings of Style Library requires documents to be checked-in). <\/p>\n 3.<\/strong> Next step it will be to host \/ upload your videos, poster images, captions and subtitles associated into your Media document library. (I am hosting the sample files on this site because I cannot guarantee the sample files from videojs.com will not be removed.) <\/p>\n 4.1. SharePoint 2010 way<\/strong> – HTML Form Web Part – Insert the HTML5 video player into your page. <\/p>\n Add the following HTML code to your webpart.<\/p>\n <\/p>\n 4.2. SharePoint 2013 way<\/strong> – Script Editor web part – Insert the HTML5 video player into your page. <\/p>\n Add the following HTML code to your webpart.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" 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 … Continue reading HTML5 video player in SharePoint 2010 and SharePoint 2013 (on-premises)<\/span>
\n(Very important! Check with the IT administrators if the following settings are applied properly – especially for the SP2013 setups.)\u000b<\/em><\/p>\n
\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_01\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_01.jpg\")
<\/a><\/p>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_02\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_02.jpg\")
<\/a><\/p>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_03\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_03.jpg\")
<\/a><\/p>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_04\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_04.jpg\")
<\/a><\/p>\n
\nHere<\/a> is an explanation of what SharePoint blob caching is.\u000bExample of BlobCache settings that can be used.
\n<\/em><\/p>\n\r\n...\r\n...\r\n<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" \/>\r\n...\r\n...\r\n<\/pre>\n
\n1.<\/strong> Download Video.js from http:\/\/www.videojs.com\/<\/a> and unzip the files to your computer.
\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_05\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_05.jpg\")
<\/a><\/p>\n\n
\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_06\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_06.jpg\")
<\/a>
\n<\/em><\/p>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_07\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_07.jpg\")
<\/a><\/p>\n
\n\u000bIf you need a sample, you can use the following files (please make sure you right click and “Save as” the following files).<\/em><\/p>\n\n
\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_08\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_08.jpg\")
<\/a>
\n<\/em><\/p>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_09\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_09.jpg\")
<\/a><\/p>\n
\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_10\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_10.jpg\")
<\/a><\/p>\n\r\n<link href="..\/Style%20Library\/video-js\/video-js.css" rel="stylesheet"><\/link>\r\n<script type="text\/javascript" src="..\/Style%20Library\/video-js\/video.js"><\/script>\r\n<script>videojs.options.flash.swf = "..\/Style%20Library\/video-js\/video-js.swf"<\/script>\r\n\r\n\r\n\r\n\r\n<div style="width:640;height:264;overflow-x:hidden;overflow-y:hidden;">\r\n<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="{}">\r\n<source src="..\/Media\/oceans-clip.mp4" type='video\/mp4' \/>\r\n<source src="..\/Media\/oceans-clip.webm" type='video\/webm' \/>\r\n<source src="..\/Media\/oceans-clip.ogv" type='video\/ogg' \/>\r\n<track kind="captions" src="..\/Media\/demo.captions.vtt" srclang="en" label="English"><\/track><!-- Tracks need an ending tag thanks to IE9 -->\r\n<track kind="subtitles" src="..\/Media\/demo.captions.vtt" srclang="en" label="English"><\/track><!-- Tracks need an ending tag thanks to IE9 -->\r\n\r\n\r\nTo 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>\r\n\r\n<\/video>\r\n<\/div>\r\n\r\n\r\n\r\n<\/pre>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_11\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_11.jpg\")
<\/a><\/p>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_12\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_12.jpg\")
<\/a><\/p>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_13\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_13.jpg\")
<\/a><\/p>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_14\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_14-1024x378.jpg\")
<\/a><\/p>\n
\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_15\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_15.jpg\")
<\/a><\/p>\n\r\n<link href="..\/Style%20Library\/video-js\/video-js.css" rel="stylesheet"><\/link>\r\n<script type="text\/javascript" src="..\/Style%20Library\/video-js\/video.js"><\/script>\r\n<script>videojs.options.flash.swf = "..\/Style%20Library\/video-js\/video-js.swf"<\/script>\r\n\r\n\r\n\r\n\r\n<div style="width:640;height:264;overflow-x:hidden;overflow-y:hidden;">\r\n<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="{}">\r\n<source src="..\/Media\/oceans-clip.mp4" type='video\/mp4' \/>\r\n<source src="..\/Media\/oceans-clip.webm" type='video\/webm' \/>\r\n<source src="..\/Media\/oceans-clip.ogv" type='video\/ogg' \/>\r\n<track kind="captions" src="..\/Media\/demo.captions.vtt" srclang="en" label="English"><\/track><!-- Tracks need an ending tag thanks to IE9 -->\r\n<track kind="subtitles" src="..\/Media\/demo.captions.vtt" srclang="en" label="English"><\/track><!-- Tracks need an ending tag thanks to IE9 -->\r\n\r\n\r\nTo 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>\r\n\r\n<\/video>\r\n<\/div>\r\n\r\n\r\n\r\n<\/pre>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_16\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_16.jpg\")
<\/a><\/p>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_17\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_17.jpg\")
<\/a><\/p>\n![\"HTML5_Video_Player_in_SP2010_and_SP_2013_18\"](\"https:\/\/www.vioreliftode.com\/wp-content\/uploads\/2014\/11\/HTML5_Video_Player_in_SP2010_and_SP_2013_18-1024x502.jpg\")
<\/a><\/p>\n