HTML5 and Streaming Media Content

HTML5 and Streaming Media Content

Rate This
  • Comments 1

The following is a quick guide on HTML5 Video and the Microsoft Media Platform, I have recently had a number of question and interest from a  number of UK universities whom are looking at providing streamed media content both on and off campus.

Microsoft has developed the IE Test Drive Video Format support page to see some examples of how various codecs work across the different browsers.

Testdrive

What this means?

Web developers are generally happy to leave their existing solution in place to play their pre-existing video/audio content using plugins. However many are now supplementing these plugins with the HTML5 Video and Audio tag if the browser is able to play their particular codec of choice natively. This is ideal as the most popular mobile platforms H.264, AAC and MP3 are generally well supported using the HTML5 video and audio tags.

How Do You Get Started?

clip_image004

The Microsoft Media Platform (MMP) frameworks are the glue that holds together individual pieces of the Microsoft end-to-end media solution.

Are the services scalable?

Microsoft MMP  is the the video platform that sits behind the Rugby World Cup 2011 event.

The Microsoft Media Platform: Player Framework (that is licensed for commercial use under the Microsoft Public License Ms-PL) has recently added a preview of support for HTML5 (API Documentation) that enables you as web developers to compliment the Silverlight player framework with a HTML5 video experience that enables you to reach additional mobile platforms.

Commercial Software offerings

There are a number of commercial solutions available that do all the work for you.

Example of these include

JW Player™ (licensed for commercial use)

SublimeVideo® (Player as a Service).

What if You Want to use your Own Player or existing solution?

It is surprisingly easy to utilise your own video solution using the default browser controls and codecs that the browser supports. The markup below shows what you need to play a video in HTML5 with a “Fall Back” to an unlisted video on YouTube.

image

Configuration considerations

1. Video MIME types supported

Cross Browser HTML5 video running under IIS

    Video Formats supported -

    • m4v,
    • mp4,
    • webm,
    • ogg,
    • wmv,
    • swf fallover.

The order of your markup does matter please list them as above

Add in the MIME Types support to IIS.

    Under IIS 7+ this is found under Website -> IIS -> MIME Types, and you’ll want to add:

    File name extension / MIME type:

    • .webm – “video/webm”
    • .ogg - “application/ogg”
    • .ogv - “video/ogg”
    • .mp4- “video/mp4″
    • .m4v - “video/m4v”

Turn off Compression under Website -> IIS -> Compression, and unchecking “Enable dynamic content compression”, and “Enable static content compression

Using Microsoft Azure Service

Azure Storage Explorer also allows you to do this on individual files. of one of the following formats:

  • .mp4 - “video/mp4″
  • .m4v - “video/m4v”
  • .webm - “video/webm”
  • .ogg - “application/ogg”
  • .ogv - “video/ogg”
  • Set these in the web.config

Video Fall-back settings

  • Fall-back content (like the YouTube example above) is only displayed by browsers that do not support the <video> tag.
  • If the browser supports the video tag but cannot play any of the media types that you have requested the fall-back code won’t fire. In this case you need to use JavaScript to detect this scenario using the canPlayType() method and provide fall-back content as shown in the example below.

image

3. Byte Range Requests (seeking)

  • Content should be served from a HTTP 1.1-compatible web server to enable seek ahead to the end of the video.
  • If you server is not HTTP 1.1-compatible (e.g. Azure Storage) you must encode the video with key index frames in the file & not at the end so that seek ahead still works. The “H.264 YouTube HD” profile in Expression Encoder 4 Pro does this.
  • Also note that if the video file is gzipped seeking won’t work. Since with most codecs the video/audio data is already compressed, gzip/deflate won't actually save you much bandwidth anyway.
  • IIS also supports Bit Rate Throttling to save you bandwidth on the server side when delivering video content.

What’s next for HTML5 Video?

There are currently a few key areas not addressed by the current W3C Video Standard (full screen support, live streaming, real time communication, content protection, metadata and accessibility). Recently the W3C Web and TV Workshop discussed some of these areas and offered some early thinking on how they may be adopted as web standards in the future.

A real issues is the lack of a solution for live and adaptive streaming. Currently there are three proprietary solutions that support live and adaptive streaming.

Dynamic Adaptive Streaming over HTTP (DASH) is currently in Draft International Standard. It looks likely that it will get W3C support if it is offered royalty free.

DASH supports:

  • Live, on-demand and time-shifted content delivery and trick modes
  • Splicing and ad insertion
  • Byte-range requests
  • Content descriptors for protection, accessibility and rating

Access to beta test and learn more about HTML5 media services?

HTML5Labs is where Microsoft prototypes early and unstable specifications from web standards bodies such as W3C. Sharing these prototypes helps Microsoft have informed discussions with developer communities to provide better feedback on draft specifications based on this implementation experience.

On the labs site Microsoft has released a Media Capture Audio Prototype that implements the audio portion of this W3C specification. The next prototype will support Speech recognition and will implement the Microsoft proposal available on the W3C website.

Overall Conclusion

If you are hosting progressive download video and audio on the web you should be looking to support HTML5 video and audio today to extend the reach of your content.

Useful Resources

Leave a Comment
  • Please add 8 and 7 and type the answer here:
  • Post
  • You can to <a href="learnhtml5.info/">learn Html5</a>

    and compilers for 'app development' for mobile devices. Companies at the cutting edge of writing applications for iphone, blackberry,android and Windows Mobile iPad now use HTML5 with compilers increasing efficiency and reducing cost/time of application development.

Page 1 of 1 (1 items)