Data Browser - Viewing Site  Sector 23 Code Bank Logged in as:  Guest  


Html5 Video Element Support in .NET
The HTML5 video element can work for playing videos, but with a lot of caveats. Here is everything I've found to get it to work in .NET:

Generally, start with the following:
<video autoplay=\"autoplay\" id=\"movie\" autobuffer preload=\"auto\" controls>

For android up to version 2.2.*, there is a bug in that it won't play if you click the video. To get around this, add javascript to play the video on click. Note this should not be added for other browsers, or the video will actually stop when clicked, instead of start.

string androidHelp = string.Empty;
if (HttpContext.Current != null && HttpContext.Current.Request.Browser.IsMobileDevice)
{ // android up to 2.2.* has a bug in that you have to start playing it on click.
if (HttpContext.Current.Request.Browser.MajorVersion <= 2 && HttpContext.Current.Request.Browser.MinorVersion <= 2)
androidHelp = "onclick=\";\"";
(and then add androidHelp to the video tag)

For IE, the video autosize does not work. You have to add a fixed width. For other browsers, you can set a percent.
string sizeHtml = "width=\"100%\" height=\"100%\"";
if (HttpContext.Current != null && HttpContext.Current.Request.Browser.Browser == "IE")
sizeHtml = "width=\"600\""; // IE does not support relative percentages; just set width and let it scale :(
(and then add sizeHtml to the video tag)

Next, add your sources.
Always list mp4 FIRST and do NOT include a type. It should look like:
<source src=\"{0}\" />

The .MP4 file must have the moov atom at the start of the stream or it won't play on newer models of android galaxy.
I use 'Any Video Converter' - under edit/options/video, click "Flatten and add faststart to mp4 files".
If you use HandBrake, check the "Web Optimized" option.

Include OGG so your video works in firefox/chrome:
<source src=\"{0}\" type='video/ogg; codecs=\"theora, vorbis\"' />

(Optional) Include WEBM (I'm not sure this is necessary as long as you include the SWF fallback in the next step; but who knows):
<source src=\"{0}\" type='video/webm; codecs=\"vp8, vorbis\"' />

Next, add your content to show if the browser doesn't support HTML5. This should be a SWF flash player that plays your video, or in worst case, an error message.
In my case, I used FlowPlayer's free swf player to play video on browsers such as IE8 that don't support HTML5:
flowplayer(""flowplayer"", ""{1}"");

If you don't have flowplayer, you can put a swf:
<object width=""100%"" height=""100%"" data=""{0}"" type=""application/x-shockwave-flash"">
<param name=""data"" value=""{0}"" />
<param name=""quality"" value=""high"" />
<param name=""allowScriptAccess"" value=""sameDomain"" />
<param name=""allowFullScreen"" value=""True"" />
<param name=""src"" value=""{0}"" />

Last, end your video tag: </video>

WARNING: If the MP4 video is on a server requiring authentication it may not work in some versions of Android Chrome (4.2). You'll have to keep your videos in a publicly accessible directory if you encounter this problem. (just the files, it is okay to secure the page). I didn't run into this, but have heard it is an issue.

If the videos still don't play, ensure you have the correct mime types on your IIS server to play the videos.

Created By: amos 6/18/2013 5:55:43 PM
Updated: 6/19/2013 3:08:44 PM