HTML5 video playback and pause

Question

I can not start video playback and pause events. I'm trying to:

<script type="text/javascript"> $(function(){ $(document).delegate('#play','click',function(){ $('.video')[0].play(); }); $(document).delegate('#video-close','click',function(){ $('.video')[0].pause(); }); }); </script> <div class="video centered-content"> <a class="circle-canvas close-video" href="javascript:void(0)" id="video-close">X</a> <video width="63%" height="80%" id="ourvideo" controls> <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"> <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"> <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"> </video> </div> <a class="circle-canvas close-video" href="javascript:void(0)" id="play" >play</a> 

Any suggestion?

Answer 1

You select a div element that does not have a play / pause method. Change:

 $('.video')[0].play(); 

in

 $('#ourvideo')[0].play();