HTML5 video play and pause triggering

Question

I'm not able to trigger video play and pause events. I'm trying with:

<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 are selecting the div element that doesn't have play/pause method. Change:

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

to:

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