Rewriting HTML5 Media Elements

From HTML5 Video
Jump to: navigation, search

Why Rewriting

HTML5 <video> and <audio> tags are a simple way to include audio and video elements into a web page and are inspired by the image (<img>) tag.

If you are looking to simplify your video hosting capabilities in a web application, the video tag is the most direct route to serving content directly to the user no matter what browser they have.

<video controls poster="./media/sintel.jpg" width="720" height="306">
  <source type="video/mp4" src="./media/sintel.mp4">
  <source type="video/webm" src="./media/sintel.webm">

In this example we are telling the browser to display a jpg image with playback controls at a specified width and height. Once the user clicks on the play button the browser will select the appropriate source format for playback.

Unfortunately, older web browsers can not play a video tag, so Javascript is necessary to replace the video tag with a Flash player or Java plugin. Please see Kaltura Rewriting Strategies for detailed information on the methods employed by the Kaltura HTML5 Video Library for platform specific fallback.

What Rewriting looks like

The Kaltura HTML5 Video Library supplements the browser based display of video elements with a cleanly styled playback control area that may be skinned through simple css or the jQueryUI themeroller.

If the user's browser is not HTML5 compliant, the library will rewrite any <video> tags on the webpage to Flash playback with Kaltura's KDP Flash Player.