HTML5 audio and video players in pure HTML and CSS.

Custom Flash and Silverlight players that mimic the HTML5 MediaElement API for older browsers

Accessibility standards including WebVTT 

Plugins for WordPress (now part of the WordPress Core!), Drupal, Joomla, jQuery, and BlogEngine.NET, ruby gem, plone, typo3.

HTML5 Video는 코덱까지 약관에서 규정되어 있지 않다. 

현재 H.264, OGG, WebM 3 가지 코덱이 유력시되고 브라우저의 지원도 다양하다. IE9 이전 IE처럼 HTML5 Video를 서포트하고 있지 않는 브라우저에 대응하는 것도 고려하면, Flash 나 Silverlight의 지원도 필요하게 된다. 이러한 현상에 대응하기 위한 몇 가지 방법 및 JavaScript 프레임 워크와 플레이어가 등장하고 있다. 실현 방법은 다양하지만, 대부분 HTML5 Video를 지원하고 있으며, 그렇지 않으면 Flash를 사용하고 있다. 

이러한 프레임 워크의 하나로MediaElement.js가 있다.

Flash뿐만 아니라 Silverlight에 대응하고 있다.

Flash와 Silverlight를 JavaScript로 둘러싸고 있다. 이렇게 하면 HTML5 Video와 같은 API에서 Flash / Silverlight 비디오도 조작할 수 있도록 하고 있다.

HTML5 Video든지 Flash / Silverlight와 동일한 UI를 제공하고 있다. Flash / Silverlight를 JavaScript로 둘러싼 것으로 출력하고 있다.

<code><script src="jquery.js"></script>

<script src="mediaelement-and-player.min.js"></script>

<link rel="stylesheet" href="mediaelementplayer.css" /></code> 

<video src="myvideo.mp4" width="320" height="240"></video> 

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">

    <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->

    <source type="video/mp4" src="myvideo.mp4" />

    <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->

    <source type="video/webm" src="myvideo.webm" />

    <!-- Ogg/Vorbis for older Firefox and Opera versions -->

    <source type="video/ogg" src="myvideo.ogv" />

    <!-- Optional: Add subtitles for each language -->

    <track kind="subtitles" src="subtitles.srt" srclang="en" />

    <!-- Optional: Add chapters -->

    <track kind="chapters" src="chapters.srt" srclang="en" /> 

    <!-- Flash fallback for non-HTML5 browsers without JavaScript -->

    <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">

        <param name="movie" value="flashmediaelement.swf" />

        <param name="flashvars" value="controls=true&file=myvideo.mp4" />

        <!-- Image as a last resort -->

        <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />

    </object>

</video>

<script>

// using jQuery

$('video,audio').mediaelementplayer(/* Options */);

</script>