IndianaGuy Posted January 9, 2017 Share Posted January 9, 2017 (edited) 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 January 9, 2017 by IndianaGuy Link to comment Share on other sites More sharing options...
justsomeguy Posted January 9, 2017 Share Posted January 9, 2017 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 More sharing options...
IndianaGuy Posted January 9, 2017 Author Share Posted January 9, 2017 Do you care to add just a little more info so I can research the right thing? Thank you Link to comment Share on other sites More sharing options...
davej Posted January 10, 2017 Share Posted January 10, 2017 You want to write event-driven javascript -- i.e. routines that are called as event handlers. See... https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events Link to comment Share on other sites More sharing options...
IndianaGuy Posted January 10, 2017 Author Share Posted January 10, 2017 Perfect. I really do like it when people post a link like this. It opens up a new area to learn about and figure out the solution. Thank you Link to comment Share on other sites More sharing options...
IndianaGuy Posted January 10, 2017 Author Share Posted January 10, 2017 (edited) 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 January 10, 2017 by IndianaGuy Link to comment Share on other sites More sharing options...
justsomeguy Posted January 10, 2017 Share Posted January 10, 2017 The browser compatibility table for mobile on that page doesn't have a lot of information, most things are listed as unknown. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now