Implementing mediaelement.js in the theme for Drupal 6 - quick and dirty...

Am posting this because I would have dearly loved to have this module for Drupal 6. For others who are interested in implementing mediaelement in D6, you can do it in your theme pretty easily. After tearing my hair out over several other video solutions for Drupal, I was blown away by how straightforward this implementation is.

Works on Android, but a little crunchy. It's themable and has css. All the browsers have a consistent looking player. I just wish I'd found this first. I'm so glad there's a module for D7. I'll be looking forward to using it in my D7 projects. Thank you for building it!

I hope you don't mind my putting this in your issue queue. It's where I looked when I was searching for a D6 implementation.

1) In your theme, add a folder called 'js'.

2) Add the jquery update module to your modules folder. Enable it and check the status report to ensure that it ran. (I'm not sure if this is necessary, but it's a good idea to have a current version of jquery anyway, and if I'm implementing jquery, I always do this.) Mediaelement.js uses jquery.

3) Download MediaElement. Place the whole shebang in the js folder once it's unpacked.

4) In your node template or view (row) template, paste the following at the top:

<?php 
drupal_add_js(path_to_theme() .'/js/johndyer-mediaelement-f998ce1/build/mediaelement-and-player.min.js'); 
drupal_add_css(path_to_theme() .'/js/johndyer-mediaelement-f998ce1/build/mediaelementplayer.css')
?>

You will need to replace the 'johndyer-mediaelement-f998ce1' in both lines of code with the name of the folder as it's unpacked. In whatever version you're using, check out the paths used in John's examples. Point at the files that he specifies in his simple example.

5) On the same page, paste this at the bottom:

<!-- startup -->
<script>
$('video').mediaelementplayer();
// OR
new MediaElementPlayer('#v1');
</script>

Use a standard html5 video tag in the middle, and you only need one video file for all browsers and devices. Read up on how this works in the non-drupal world before implementing the html5 video tag if you need. It isn't complicated. This will render the poster image in the right place and follow the instructions in the video tag.

There are instructions in the downloaded files, but step 5 wasn't clear to me. Nothing worked until I moved it to the bottom of the page.

This worked with MediaElement 2.1.5