Mediaelement.js

In case the Internet runs out of YouTubes! See the full documentation here.

Javascript is disabled in your browser. If the video does not load below, download the video file here.

Required files

• Video file, compressed for web, in .mp4 and .webm formats (check out MiroVideoConverter to convert .mp4 to .webm - it's free, open-source, and works like a charm)
• Poster image for video (with same dimensions as native video file)
• mediaelementplayer.min.css
• Your favorite jquery library
• mediaelement-and-player.min.js
• flashmediaelement.swf

Markup

It's HTML5-licious!

<p class="video-link">Your browser does not support video playback. <a href="video/cupcake.mp4" target="blank">Download this video</a>.</p><!-- no-js fallback link -->
<video id="player1" style="width: 100%; height: 100%;" poster="img/cupcake.jpg" controls="controls" preload="none">
    <source type="video/webm" src="video/cupcake.webm"/><!-- so firefox can support video without js -->
    <source type="video/mp4" src="video/cupcake.mp4"/>
    <object type="application/x-shockwave-flash" data="js/flashmediaelement.swf">
        <param name="movie" value="js/flashmediaelement.swf"/>
        <param name="flashvars" value="controls=true&file=video/cupcake.mp4"/>
        <param name="wmode" value="transparent"/>
        <a href="video/cupcake.mp4" target="blank"><img src="img/cupcake.jpg" alt="Internet vs. Cupcake III" title="No video playback capabilities"/></a><!-- flash fallback - load link to video if all else fails -->
    </object>
</video>

<!-- before the closing body tag, to apply mediaelement.js to videos on page -->            
<script>
    $(document).ready( function() {
        $("video").mediaelementplayer();
    });
</script>