jQuery play specific HTML5 video
<p>I currently have a site setup with similar divs as to the one below. Only one is visible at a time.</p>

<pre><code>&lt;div id="intro_page" class="sub_page"&gt;

        &lt;div class="sub_header"&gt;&lt;img src="assets/img/intro_header.jpg" /&gt;&lt;/div&gt;

        &lt;div class="video_holder"&gt;
        &lt;div class="play_button"&gt;&lt;/div&gt;
            &lt;video class="video_player" autobuffer&gt;
                &lt;source type="video/ogg" src="assets/media/test_video.ogg"&gt;
            &lt;/video&gt;
        &lt;/div&gt;

        &lt;div class="page_text"&gt;&lt;img src="assets/img/intro_text.jpg" width="1020" /&gt;&lt;/div&gt;


    &lt;/div&gt;&lt;!-- /intro_page --&gt;
</code></pre>

<p>Each page has a similar <code>video_holder</code> div and I'm trying to play the video in that current div.</p>

<p>I've tried things similar to this, but with no luck.</p>

<pre><code>$(".play_button").click(function() {

    $(this).fadeOut("slow");

    $(".video_player:visible").play();

});
</code></pre>
