Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Adding MediaElement.js

Anwar Rizalman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Anwar Rizalman
Python Development Techdegree Graduate 33,620 Points
Posted by Anwar Rizalman
.a{fill-rule:evenodd;}techdegree seal-36
Anwar Rizalman
Python Development Techdegree Graduate 33,620 Points

Regarding where to insert the script tag in the .html file

I've previous basic introductory video regarding javascript and also jquery, and all of them always recommended to put the script tag after the markup just before the closing body tag otherwise it won't work properly. I also just learnt that the DomContentLoaded event let's us to put the script tag in the header tag.

However in this workshop, I do not get why and how the script tag works like as it suppose to eventhough it is placed before the main body?

Thank you

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

It depends on what the script does, and perhaps on browser timing. The main thing you want to avoid is running the script before the page loads if the script contains references to page elements. If the script doesn't work with the page elements, then the placement would not be sensitive.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

In this case, the scripts loaded in the head are generic libraries that wouldn't reference any page elements on their own. But the script that invokes the libraries is the last thing in the body.

Anwar Rizalman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Anwar Rizalman
Python Development Techdegree Graduate 33,620 Points
Anwar Rizalman
.a{fill-rule:evenodd;}techdegree seal-36
Anwar Rizalman
Python Development Techdegree Graduate 33,620 Points

Really sorry I'm still a bit confused. If you seen the video, the scripts added are in the head. The MediaElement player was used by adding the class "mejs__player" to the audio and video element. We can see the changes when it was previewed.

I'm not good at English but when you said the script that invoke the libraries, did you meant about the script that targets the class "mejs__player" and then changing its api there? For example:

<script>
      $('video, audio').mediaelementplayer({
          features: ['playpause', 'tracks', 'progress'],
          startLanguage: 'en'
      });
    </script>

So in this case, we can't put the script before the body tag? Thankyou

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

That last script is the one that references the video and audio elements on the page, and it's the last thing in the body. The ones that get loaded at the top are just libraries.