Page 1 of 1

ASP.NET C# Mobile Browser Detection for HTML5 Video

#1 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 354
  • Joined: 10-November 09

Posted 13 May 2011 - 07:44 AM

Greetings one and all...

This is my first tutorial, so please, be gentle and kind with your questions or comments.
I'm sure there are many solutions out there. I make no claim to say that this is the only way to do it... but, rather just one of the solutions that I came up with. I know it's not perfect, but it works for what I needed to do with it - if you have other suggestions to make it better, I'm always willing to hear/read them. Without further delay - here's my first tutorial.


The way the web development standards continually change, it's good to stay on top of things.
The latest implementation of HTML5 and Video have left many pondering how to take into consideration - the need for HTML5 video coding.

There are ways of doing it in Javascript, relatively quick. But how do you do it in the back end of an ASP.NET page?
Well I came across the need recently (for my job), and here's the solution that I came up with.

First, I was interested in using this: http://videojs.com/ for the new HTML5 implementation process. Essentially, it gives you a couple of Javascript files and a few CSS files to be linked to.

The simple html way of doing it, is like this.
(if you are using an HTML5 compatible browser, then use HTML5, otherwise - use FLASH.)
  <head>
  ...
    <script src="video.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
  ...
  </head>

  <!-- Begin VideoJS -->
  <div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video class="video-js" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- Download links provided for devices that can't play video in the browser. -->
    <p class="vjs-no-video"><strong>Download Video:</strong>
      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>
  <!-- End VideoJS -->



HOWEVER, I wanted to do it in the back end - because I had other functionality that was conflicting with it.
So, I started off with the On Page Load event and did a simple browser detect function; wrapping in a !Page.IsPostBack.

(You will also note that there's a "session" in there. I'm using that for another page's functionality as well as this one. Besides - it's always good to know how people are viewing your site... you can collect that data or you can choose to show specific content, etc.)

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            //automatic browser detection
            System.Web.HttpBrowserCapabilities browser = Request.Browser;
            string bName = browser.Browser;//get browser name
            Session["browserType"] = bName;//Store it in a session variable
            bool isMobile = browser.IsMobileDevice;//is this a mobile browser?

            //for testing purposes - uncomment out this...
            //Session["MobileBrowser"] = true;

            if (HttpContext.Current.Request.UserAgent.ToLower().Contains("ipad")
                        || (HttpContext.Current.Request.UserAgent.ToLower().Contains("iphone")
                        || (HttpContext.Current.Request.UserAgent.ToLower().Contains("ipod")
                        || (HttpContext.Current.Request.UserAgent.ToLower().Contains("android"))
                        || (HttpContext.Current.Request.UserAgent.ToLower().Contains("Blackberry")))))
            {
                //If you're mobile, make the session true.
                Session["MobileBrowser"] = true;
                //populate this div with the appropriate HTML5 tags
                dynamicDiv.InnerHtml = MobileDiv();

            }
            else
            {
                //otherwise - make it false... this will come in handy later on.
                Session["MobileBrowser"] = false;
                //populate this div with FLASH
                dynamicDiv.InnerHtml = NonMobileDiv();
            }
        }

    }


You'll notice that I called another function in there for "MobileDiv();" and one for "NonMobileDiv();"
You're no doubt wondering what those are, exactly.

Well, I decided to create a "div" (runat="server") that I wanted to populate with the appropriate "stuff".
                    <div id="dynamicDiv" class="video-js-box" runat="server">
                        <%--this is where the video will play--%>
                    </div>


Then I created a "Private String"; one for each type. Each of these "Private Strings" is basically what's populating the "div"....


If you are a mobile browser or HTML5 compatible browser then use the "<video>" tag.
    private String MobileDiv()
    {
        StringBuilder sb = new StringBuilder("");
        sb.Append("<video id=\"example_video_1\" class=\"video-js\" width=\"460\" height=\"296\" controls=\"controls\" preload=\"auto\" poster=\"http://www.myurl.com/images/VideoPreview.png\">");
        sb.Append("<source src=\"http://www.myurl.com/video/myVideo.mp4\" type=\'video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"' />");
        sb.Append("<source src=\"http://www.myurl.com/video/myVideo.ogv\" type=\'video/ogg; codecs=\"theora, vorbis\"'>");
        sb.Append("</video>");
        return sb.ToString();
    }



BUT if you can use FLASH, then use the "<object>" tags....
    private String NonMobileDiv()
    {
        StringBuilder sb = new StringBuilder("");
        sb.Append("<object width='460' height='296' id='StrobeMediaPlayback' name='StrobeMediaPlayback' type='application/x-shockwave-flash' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000'>");
        sb.Append("<param name='movie' value='http://www.myurl.com/video/StrobeMediaPlayback.swf' />");
        sb.Append("<param name='quality' value='high' />");
        sb.Append("<param name='bgcolor' value='#000000' />");
        sb.Append("<param name='allowfullscreen' value='true' />");
        sb.Append("<param name='flashvars' value='&src=http://www.myurl.com/video/myVideo.mp4&autoHideControlBar=true&streamType=vod&autoPlay=false&stretching=exactfit' />");
        sb.Append("<embed src='http://www.myurl.com/video/StrobeMediaPlayback.swf' ");
        sb.Append("width='460' height='296' id='StrobeMediaPlayback' quality='high' bgcolor='#000000' name='StrobeMediaPlayback' allowfullscreen='true' ");
        sb.Append("flashvars='&src=http://www.myurl.com/video/myVideo.mp4&autoHideControlBar=true&streamType=vod&autoPlay=false&stretching=exactfit' type='application/x-shockwave-flash'>");
        sb.Append("</embed>");
        sb.Append("</object>");
        return sb.ToString();
    }


That's it. Enjoy. If this tutorial was helpful in any way, and you thought it was good, then I was happy to do it.
Otherwise - I was forced to do it against my will by pirate ninja elves from some netherworld that really doesn't exist, except in my own mind. And if you see any of them, approach with caution. They like peanut M&M's and toast - but not together. And PLEASE, whatever you do, don't ever ask them for directions. They will almost always give you directions to Bobo The Clown - Kind of the underworld.

-mb

Is This A Good Question/Topic? 0
  • +

Page 1 of 1