We Keep Coding

Embedded Video.JS Controls Problems in SharePoint Foundation 2010

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 supports HTML5 video
</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)?

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="{}">

HTML5 Video Not Working in IE9+10

I'm trying to make an image banner using HTML5 video across multiple browsers. I have the video working in Chrome and Firefox across most operating systems, but Internet Explorer does not appear to work above IE9. The page where the banner is located does not exist in the same folder as the video files; the banner exists across many pages.
The problem that I can see is that IE9 and 10 cannot see the Flash fallback option within the Video HTML5 code and it doesn't register. I wanted to create some sort of if-else statement that would force users who are using IE9 or 10 to view the Flash version while redirecting all other browsers to the general HTML5 version. This banner works in versions below and including IE8.
I do not have access to the .htaccess file; I saw this suggested somewhere else in order to manually add the MIME type (even after I specified it within each video source line.) I looked at the console in IE9+10 to see if the MIME type was an issue, and no error came up. Right-clicking the space where the video came up also gave me HTML5 video options, but clicking Play did nothing.
If someone can help me debug the code or figure out a wa y to make it work, that would be great. Thank you!
Below is the HTML5 video code that I am using that works across Chrome, Firefox and other browsers.
<video autoplay loop>
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar_Banner.mp4" type="video/mp4">
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar_Banner.ogv" type="video/ogg">
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/FlashFulmar Slideshow.webmhd.webm" type="video/webm">
<object width="954" height="224" type="application/x-shockwave-flash" data="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar%20Banner.swf">
<param name="movie" value="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar%20Banner.swf" />
</object>
</video>
Edit: The codec for the mp4 file is h.264 + AAC.

IE only supports a limited set of codecs for video sources
IE 9+ supports h264 with mp3/aac, vp8 and vp9 are questionable, all others it does not seem to support.
MDN doc on media browser compatibility
So you will have to provide several video sources to support each browser, but not necessarily a video for each browser as some of the browsers do overlap in their support.
Providing a video with h264 aac/mp3 should play on IE, Safari, and Chrome.
While a video with Theora or VP8 should play on Firefox and Opera

A quick and dirty solution would be to force IE to emulate an older version of the browser:
<!-- Mimic Internet Explorer 8 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >
Note that these <meta tags must be put in the header before all other elements (except for the title element and other meta elements).

Chrome HTML5 video with mp4/webm loaded via PHP fpassthru(): can't set currentTime?

So this is an odd issue I'm running into. I've only tested Chrome and Safari, both on Mac, and between those browsers the problem only manifests on Chrome.
I have a very basic HTML5 video element, which loads a video from my server, and the user has a few buttons onscreen to jump to specific times within the video.
When the video file is referenced as a direct link, e.g.:
<video id="thevideo" width="720" height="480">
<source type="video/webm" src="videos/vid102.webm" />
<source type="video/mp4" src="videos/vid102.mp4" />
<p>Your browser does not support this video.</p>
</video>
...it works just fine.
However, I've just set it up so the videos can be instead loaded via a PHP fpassthru, e.g.:
<video id="thevideo" width="720" height="480">
<source type="video/webm" src="getvideo.php?t=webm&v=166" />
<source type="video/mp4" src="getvideo.php?t=mp4&v=166" />
<p>Your browser does not support this video.</p>
</video>
where getvideo.php looks something like this:
<?php
$videoID = $_REQUEST["v"];
$videoType = $_REQUEST["t"];
$vidPath = "videos/video$vidFile.$videoType";
$fp = fopen($vidPath, 'rb');
header("Content-Type: video/$videoType");
header("Content-Length: " . filesize($vidPath));
fpassthru($fp);
?>
The strange behavior is this: On both browsers, the video loads and plays just fine. On Chrome, however, the version using the fpassthru PHP script breaks the ability to set the player's "currentTime" attribute and thus jump to somewhere in the video. If I call document.getElementById('thevideo').currentTime = 50, instead of jumping to the 50 second mark, it just stays where it is.
Any idea why this might be?
UPDATE:
I've seen some indications that this has something to do with Chrome specifically requiring the "Accept-Ranges" header to be provided in the response. I've added the header "Accept-Ranges: bytes" to the .php script's output, and I've made sure that the web server is allowing byte range requests, but still, it's not working.

You are correct about requiring the "Accept-Ranges" header, as part of HTTP Byte Serving. I suggest reading this answer to a similar question:
Seekbar not working in Chrome
Adding the response header is not sufficient. You have to also respond with the "206 Partial Content" status code and return only the requested range of bytes. It sounds like you're still returning the whole file. fpassthru will read back the file all the way to the end, so it looks like you're going to need to find another way to read the file.

Flowplayer loading bar not going away

I've been working on a video uploading script, you can upload a video (I haven't tested all video formats yet) and it'll convert the video to .mp4, .ogg, and .webm files.
I'm using flowplayer to embed the video, and you can see a test video working, but the loading bar doesn't go away so you can't get to the controls. Here's my embed code:
<link rel="stylesheet" type="text/css" href="<?=$url;?>javascript/flowplayer/skin/minimalist.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="<?=$url;?>javascript/flowplayer/flowplayer.min.js"></script>
(I don't think that part is the problem)
and
<div class="flowplayer" data-swf="<?=$url;?>javscript/flowplayer/flowplayer.swf" data-ratio="0.417">
<video autoplay>
<source type="video/webm" src="<?=$video->file('webm');?>" />
<source type="video/mp4" src="<?=$video->file('mp4');?>" />
<source type="video/ogg" src="<?=$video->file('ogg');?>" />
</video>
</div>
I've tried removing the data-swf and the data-ratio attributes, I've tried moving around the link and script tags, but no cigar.

I found the problem, I'll put it here in case anyone gets the same problem.
It might have to do with using the newest jQuery version from Google's hosted library, but flowplayer.js had this:
on("mouseout.tip", function()
When they should have used
bind("mouseout.tip", function()

Streaming a WAV file. (NOT recording)

I'm trying to play a .wav as background music (It's match ambience) but I'm having problems getting it to stream, it's 20meg so I don't really want to make people wait for it to download... could be waiting 30seconds!
I had it working fine in IE but FF doesn't seem to like any code that works in IE :)
I was using an object to hold the sound which worked in IE. I also had some javascript fading the sound in and out when I wanted to.
Could anyone please provide me with a code snipplet for cross browser compatability for playing wav files without the need of additional plugins (if possible) and without using jquery or prototype or anything similar.

Try this:
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</body>
</html>
But you should compress the wav file to mp3. You can see a live demo here.