Jump to content

Div on readyState


IndianaGuy
 Share

Recommended Posts

I ma trying to make a div (class="loader") hidden all the time. It only shown up when the user hits 'play' on an audio file, then the div hides again when the file starts playing

mediaPlayer here is obviously the audio tag.

thank you

mediaPlayer.play();
while(mediaPlayer.readyState >= 3) {
     $(".loader").show();
    }
Edited by IndianaGuy
Link to comment
Share on other sites

You don't need a while loop for that, you're just going to cause the browser to constantly loop while the video is being played. And, if the video is not played when that code runs, it will never show the element. You should use an event to determine when playing stops or starts so that you can handle the event to show or hide what you want.

Link to comment
Share on other sites

wooohoo. I learned a few things but now I am stuck lol

conle.log is working on desktop. On a mobile device though, the loader just stays visible. Are those events not supported and how can I fix that? here is what I have so far. thank you

//Add a listener to SHOW the loading bar
mediaPlayer.addEventListener('loadstart', showLoader); 
console.log('load listener found');
 
//Add a listener to HIDE the loading bar
mediaPlayer.addEventListener('canplay', hideLoader); 
console.log('can play listener found');
 
function showLoader() {
$(".loader").show();
}
 
function hideLoader() {
$(".loader").hide();
}
Edited by IndianaGuy
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...