Using jPlayer's currentTime to sync audio to screen animation

[Randy Miller]

Hello,

I've been tasked with syncing audio to a series of PowerPoint-ish slides in HTML (essentially to replicate what you can easily do in Flash), and I have been experimenting with using Javascript's setInterval function to check the status of $("my-player").data("jPlayer").status.currentTime, and fire off functions to reveal bullet points, display text, etc based on the utterance/timing of words/phrases in the voice-over. Has anyone else had any experience with this? So far so good, but I would prefer to stand on the shoulders of giants.

Thanks!

[Mark Panaghiston]

You could take a look at Popcorn.js as it is all about generating events off time points in HTML5 media. I even wrote an HTML bridge into jPlayer in the hope that jPlayer would work with popcorn with the flash fallback, but alas, they are not completely event driven and pole a media property that is screwed up in IE9. Well, the media property is correct in IE9, but every HTML element has the property so you cannot make your own like every other browser.

You could look at how they generate an array of time events though...

Actually, I added the code that works into the docs:
http://jplayer.org/latest/developer-guide/#jPlayer-option-emulateHtml

I have not looked at popcorn's development over the past few months, so maybe they use an event now rather than pole the media property. That code there in the docs will work in all browsers and IE9. It will not work in IE6/7/8 though if I remember rightly.

The problem being that they pole the readyState DOM property and for some reason, IE inherits the document.readyState for all nodes and then has the proper properties for the media elements. (Overriding the inherited value.)

[Randy Miller]

Mark, thank you so much for the quick reply. Are you suggesting that using setInterval to track jPlayer's currentTime value is a bad idea? 

The issue I would run into with Popcorn is that it doesn't support legacy browsers. I was hoping to use jPlayer as the "engine" for running a synced voiceover presentation because it does.

Perhaps I will keep going with my original idea and post the results…

[Mark Panaghiston]

I was just letting you know about popcorn as it orders the timing events and then checks for them in a sensible way... Say 1000 time events and you are half way through... It would only check the events that have not fired yet up to those that are not needed yet, as they are all in order. (Something like that.) So it is quite efficient in this code performance.

Depending on your interval period, you might want to use the timeupdate event instead. It has a period of around 200ms to 250ms depending on the browser.

If you do not have hundreds of time points, then your method will work ok. I expect that toward the start it will check a few times, but toward the end it will be checking lots of times. So what out for that, and check that it does not get bogged down with all the conditional checks.

Let us know how you get on.

[Shay Wilson]

I would use the timeupdate event to match current time to other things.  That way jplayer will tell your code the current play time rather than setinterval which may work, but may not match the actual time (if the media was not paused, or buffered or a variety of other events).  

In the constructor add

timeupdate: function (e){

                        if (e.jPlayer.status.currentTime=sometime)

                                {//do thing}

                     }

--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.

To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/MO5llrZwNPoJ.

To post to this group, send email to jpl...@googlegroups.com.
To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jplayer?hl=en.

[Randy Miller]

Thank you Mark and Shay for your replies. I will certainly look into timeupdate.

[Randy Miller]

The first answer in this post seems to address this directly, and worked just as well as the setInterval method I was attempting when I applied it to the instance of jPlayer I have, which was loading an MP3. It seemed to affect the CPU identically, although I'm only binding about 40 lines of Javascript to each at the moment. Figured I would pass it along in lieu of having found anything more useful myself (for the moment, anyway):

http://webmasters.stackexchange.com/questions/7518/has-anyone-been-able-to-convert-a-sites-media-content-from-flash-to-html5