Installing mediaelement.js - what to do?

Question

I want to use mediaelement.js on a website I developed from scratch using php, html etc. I'm struggling to understand how to install the mediaelement.js.

The instructions on https://github.com/mediaelement/mediaelement/blob/master/docs/installation.md are as follows:

1. Install MediaElementJS

To get the default installation there are several different ways.

- Download the package from https://github.com/mediaelement/mediaelement
- Use a CDN reference; the most popular ones are jsDelivr and cdnjs.
- Through GIT: git clone https://github.com/mediaelement/mediaelement.git
- Through npm: npm install mediaelement
- Through BOWER: bower install mediaelement
- If you are using Meteor: meteor add johndyer:mediaelement or meteor npm install mediaelement

So, apart from the first instruction, I have no idea what they're talking about. Can I please have an explanation on how to install mediaelement.js and the best option for somebody who built their website from scratch?

Many thanks in advance.

Answer 1

Go to http://www.mediaelementjs.com/ and select click 'Download Player'. Expand the downloaded zip and look at the content of src.

Answer 2

Just an update on this topic. I've looked into this further and found out that these are the files I need (which can be found in the build folder, once you've downloaded the package and unzipped it):

mediaelement-and-player.min.js
mediaelementplayer.css
mejs-controls.svg
jquery.js (I used my existing jquery file)

Then, upload these files to your js directory:

jquery.js
mediaelement-and-player.min.js

Upload these files to your css directory:

mediaelementplayer.css
mejs-controls.svg

Link to files on your index page (place them above the link to your custom css)

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

Last but not least, add class="mejs__player" to your video / audio tag (remove "controls" from tag if you're using it)