what technology combination should I use to make a video player with custom User Interface in the new HTML 5

Question

I am trying to do something simple for now. I am making a video player for autistic kids. The idea being: a video player runs on a tablet (ipad / android). A tap (anywhere on the screen) toggles the video state between play/pause.

For now, I'm trying to get it to just work on a chrome/firefox browser + PC combination. I have been reading about the ongoing issue with codecs, and am familiar with the whole open source/paid codecs problem. Right now, I just want to get the functionality in place. Setting up a video player and pointing it to the right source is a no-brainer. I was wondering what would be a good way to capture the user event for tapping anywhere on the screen and that toggles the play state. I wanted to try some of the new HTML5 stuff, but the technologies/options are overwhelming. Can someone suggest me what library/technology would be a good fit ( jquery/ some other js library) ? In doing this, I'd like to explore using some library which I can use in other future projects as well.

Thanks for your time.

Answer 1

Here 'sa nice list to look through. They all have their own advantages and disadvantages. You'll just need to pick the library best suited to your needs and build from there.

Answer 2

Could you possibly wrap a div around the entire thing and attach an onclick event to the div that fires between pause and play?

<script>
var playing = 1;

function togglePlay(){
    if(playing){
       tellVideoPlayerToStop();
       playing = 0;
    } else {
       tellVideoPLayerToStart();
       playing = 1;
    }
}
</script>

<div id="divid" onclick="togglePlay();"> 
  //Video player goes here.
</div>

That's overly simplified but the general idea is there non?