Embedded Video.JS Controls Problems in SharePoint Foundation 2010

Question

I've been asked to embed several locally hosted videos into a SharePoint Foundation 2010 site. Since Foundation 2010 appears to lack the standard Media WebPart found in other versions of SharePoint, I'm trying to use a local install of video.js (v5.11.6) implemented through a Content Editor WebPart. I'm a bit out of my depth here, but I'm reasonably confident I have the install and the html correct because my html5 code works as expected (control bar loads, video preloads, does not autoplay, etc.) when built directly in an htm file hosted on SharePoint and launched in Chrome (v52).

<script>
<link href=".../Style%20Library/video.js/video-js.css" rel="stylesheet"></link>
<script type="text/javascript" src=".../Style%20Library/video.js/video-js.swf/video.js"></script>
<div style="width:740;height:416;overflow-x:hidden;overflow-y:hidden;">
<video id="Data Cleansing" class="video-js vjs-default-skin vjs-big-play-centered" controls preload = 'auto' width="740" height="416" poster=".../FACT/SiteAssets/SitePages/Data%20Cleansing/ Poster.jpg" data-setup="{}">
<source src=".../FACT/SiteAssets/SitePages/Data%20Cleansing/Video.mp4" type='video/mp4' />
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>
</script>

When this same code is added to the Content Editor WebPart in SharePoint 2010 Foundation and viewed on the SharePoint page in Chrome, however, the controls don't load as expected with the video. The video itself still loads correctly, but the controls must be added via right click menu, "Show Controls". Once this is done, the video can be played as normal.

What is preventing the controls from loading in Chrome as expected on SharePoint? Or am I going about this the wrong way and is there a simpler means of embedding video in SharePoint Foundation 2010 (without access to the Media WebPart)?

Have you looked to see if this has been asked on SharePoint SE? — DᴀʀᴛʜVᴀᴅᴇʀ
Thanks! I'm still learning my way around. I found a general html5 workaround that seems to do it. For anyone dealing with a similar issue, controls = "controls" preload = 'auto'' did the trick. — C Walsh
If that was the answer then instead of making it a comment leave it as an answer and mark it as the accepted answer. — DᴀʀᴛʜVᴀᴅᴇʀ

C Walsh C Walsh · Accepted Answer · 2016-09-04T03:09:12

For anyone dealing with a similar issue, I found a general html5 workaround that seems to do it. The problem was in the video tag. It looks like this solution is applicable for both SharePoint 2010 and 2013.

<video id="Data Cleansing" class="video-js vjs-default-skin vjs-big-play-centered" controls = "controls" preload = 'auto' width="740" height="416" poster=".../FACT/SiteAssets/SitePages/Data%20Cleansing/ Poster.jpg" data-setup="{}">

Embedded Video.JS Controls Problems in SharePoint Foundation 2010

1 Answers