Demo 19: MediaElement.js | Web Video Lesson

MediaElement.js Player

MediaElement.js provides consistent UI across browsers with fallbacks for legacy browsers (Flash/Silverlight). Note: Modern browsers don't need these fallbacks.

        <video id="player" controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
</video>

<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />

<script>
  new MediaElementPlayer('player', {
    features: ['playpause', 'current', 'progress', 'duration',
               'volume', 'tracks', 'fullscreen'],
    success: function(mediaElement, originalNode) {
      console.log('Player initialized');
    }
  });
</script>
      

Legacy support: MediaElement.js was designed for browsers that needed Flash/Silverlight fallbacks. Since Flash is dead and modern browsers have excellent HTML5 support, this library is primarily useful for maintaining legacy codebases.

When to use MediaElement.js:

Maintaining legacy applications
Need consistent UI across very old browsers
Already integrated in existing projects

For new projects: Use Plyr or Video.js instead.