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's a 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?