DTS player

Cross-browser HTML5 <video> player, designed for consistent H.264 playback with a single set of CSS-styled controls.

What it does

Single video file: Browsers that don't support the <video> tag can easily fallback to Flash or Quicktime (see Video for Everybody). However, if a browser does support the <video> tag, but doesn't support your video codec, it will not fallback to Flash (e.g. Firefox does not fallback on H.264 files. It just displays a black X). DTS Player detects both <video> support and support for H.264 and uses Flash as a fallback.

Single set of controls: Most HTML5 video players have one set of controls for HTML and a separate set of controls in Flash for non-HTML5 browsers. The DTS player, however, uses a special Flash player that mimics the HTML5 <video> event model. This allows one consisent CSS-styled set of controls driven by a consistent event model.

Example

Usage

<-- add scripts and style -->
<script src="jquery.js"></script>
<script src="jquery.dtsplayer.js"></script>
<link href="jquery.dtsplayer.js" rel="stylesheet" />

<-- use a video tag with H.264 video -->
<video class="player" width="640" height="360" autoplay="autoplay">
   <source src="http://s3.amazonaws.com/dtsdepts/review/adm_jsaddington_review.mp4" type="video/mp4" />
</video>

<-- setup with jQuery plugin -->
<script>
$('.player').dtsplayer();
</script>

Download

Currently hosted on Github: http://github.com/johndyer/dtsplayer

References

Specs

Other HTML5 players