How do I locally enqeue the mediaelement.js file into a wordpress theme

You need to init the MediaElement.js by doing-

For video or audio tag-

<script>
// using jQuery
$('video,audio').mediaelementplayer(/* Options */);
</script>

And for custom div–

<script>
// JavaScript object for later use
var player = new MediaElementPlayer('#player',/* Options */);
// ... more code ...
player.pause();
player.setSrc('mynewfile.mp4');
player.play();
</script>

Just have a look on MediaElement.js wesite.

And it would be better to write the main_js enqueue line like below-

wp_enqueue_script( 'main_js' , get_template_directory_uri() . '/js/main.js' , array( 'mediaelement_js', 'jquery' ) , '', true);

Cause as far as I understood you’ve put you custom JavaScript code in this file. So better enqueue it after MediaElement.js.

And in your HTML file it is working cause I think they have called it in HTML file inside <script></script> tag. And in your theme it is not working cause the init of MediaElement.js is happening before the MediaElement.js is loaded. So better move this code to you custom script file (like main.js) and call it after MediaElement.js.

Hope that helps.

Related Posts: