Sharepoint 2013 and Html5 Video

Question

Does anyone know why (or can they point me in the right direction) my html5 video is not playing on my sharepoint page?

Unfortunately it is defaulting to the silverlight player every time and I am stuck on a permanent buffer). I'm sure there has to be literature for this and if anyone knows where it is can they point me in the right direction?

Answer 1

1. Download Video JS files and upload into Style Library

   video.js

   video-js.css

   video-js.swf

2. Upload Video file and a poster (image) to Site Assets

3. Edit page and add a Script Editor Web Part

4. Paste following in the Script Editor Web Part window

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

Change VideoPreviewFrame.jpg with your poster image

Change MyCoolVideo.mp4 with your video file name