HTML 5 Video Playback Fails

Question

Usable public link here: https://muwadev3.millikin.edu/muportal/public/streamingMedia.jsp?id=ab7cfb20f103a44a49d14244ae0a3f2f

The HTML elements are dynamically generated by the JSP code, and I've modified its output a number of times to try different things. It should be similar to the following:

<video id="viewer" width="320" height="240" controls preload>
    <source id="mp4Src" src="https://muwadev3.millikin.edu/muportal/secure/pages/features/StreamingMedia/index.jsp?f=ab7cfb20f103a44a49d14244ae0a3f2f.mp4" type="video/mp4">
    <source id="webmSrc" src="https://muwadev3.millikin.edu/muportal/secure/pages/features/StreamingMedia/index.jsp?f=ab7cfb20f103a44a49d14244ae0a3f2f.mp4" type="video/webm">
    <source id="oggSrc" src="https://muwadev3.millikin.edu/muportal/secure/pages/features/StreamingMedia/index.jsp?f=ab7cfb20f103a44a49d14244ae0a3f2f.mp4" type="video/ogg">

For some time, I've been working on building what amounts to a cross-device video playback server. I'm working within a Tomcat/JSP environment, which handles uploading the user's file, converts the file to mp4/webm/ogg behind the scenes, and should make the video file available on the viewer page when it's finished converting.

That all works well (finally!) after some playing around and building. However, my issue is with the playback of the video tag. My intended behavior is to load a video tag with separate source tags, each containing a reference to one of the file types. After perusing "Dive Into HTML5" and various other resources, I determined that getting those formats should cover all of the major browsers. I wanted to provide both download and viewing capability for users, so they are made directly available by a separate page (which works perfectly) which immediately begins downloading the file. The viewing page is sourced from this download page, and the link between them seems to be perfect, always returning a 200 status when examining the requests on the page.

Despite the indications of the reference material, the only file that plays between Firefox and Chrome is the ogg version of the file-- whereas I expected webm to be supported generally, using the other file types as fallbacks. Chrome disabled the controls, and shows a black background, while Firefox has given both complaints of "No video with supported format and MIME type found" as well as "Video can't be played because the file is corrupt".

I know my files work properly, because retrieving them from the download page allows me to play them in VLC with no issue, and I can similarly play them directly from my host machine after using the same conversion.

The only incongruity I can find is that the file utility (on Linux or Windows through GNUWin32) reports the webm file as "application/octet-stream", though the serving page correctly sets the header as video/webm.

Typically I would use the Chrome Developer Tool and Firebug to get debugging information, but those are summarily unhelpful, failing to provide any information about why decoding failed, or why playback doesn't work.

I've made sure that the Tomcat server configuration includes each of the filetypes in its mime-type configuration, tried with and without the codecs declaration within the source tags, and also tried moving to a src="path/to/serving/page" attribute on the video tag (eliminating the source elements).

This has been tested on the current Chrome build 42.0.2311.152 m, on Canary build 44.0.2402.0 canary (64-bit), Firefox ESR 31.5.3, and Firefox Developer Edition 39.0a2.

So-- is there a better way than plugging-and-chugging with different options to troubleshoot HTML 5 video playback? Am I missing anything obvious?

Answer 1

Okay, so at issue was the video source/file download page, which was not working perfectly. Examining the video files with Notepad++ or vi showed that the downloaded file contained two blank lines before the rest of the data, which was identical to the contents of a similarly-encoded file from my local machine.

The source page was a JSP along the lines of

<% //set imports %>
<% //set content headers %>
<% //send file with FileInputStream reading from hard drive %>

Each of the JSP output blocks included a carriage return, which outputted two blank lines before also outputting the contents of the encoded file. One way to fix this is to smear the tags together like so

<% //set imports
%><% //set content headers
%><% //output file%>

This can also be accomplished with the following:

<%@ page trimDirectiveWhitespaces="true" %>