HTML5 Video Autoplaying when hidden
<p>I am making a page that has an HTML5 video hidden when the page first loads, and then either plays when someone clicks a play button or autoplays after 5 seconds, whichever comes first. When it ends, I want the play button to show up again and the video to hide.</p>

<p>I tried adding a data-hasPlayed attribute that is set to either true or false, but when it finished playing and went back to the logo, the video would start autoplaying again (even though it was hidden).</p>

<p>Here is the code-- I took out the data-attribute stuff for now just to make it all simplified again. Let me know if you want to see that code still and I can update it. Thanks in advance!</p>

<p>HTML: </p>

<pre><code>&lt;video id="trailer" controls preload="auto"&gt;
    &lt;source src="video/trailer.mp4" type="video/mp4"&gt;
    Your browser cannot play this now.
&lt;/video&gt;
</code></pre>

<p>JQuery:</p>

<pre><code>// AUTOPLAY VIDEO AFTER 5 SECONDS
var video = document.getElementById("trailer");
video.addEventListener("canplay", function() {
        setTimeout(function(){
            $('a.videoPlay').hide();
            $('#videoContainer').show('');
            $('#trailer').show();
            video.play();
        }, 5000);
});

// PLAY VIDEO ON CLICK
$('a.videoPlay').click(function(){
    $('a.videoPlay').hide();
    $('#videoContainer').show();
    $('#trailer').show();
    video.play();
});

// AFTER VIDEO ENDS, SHOW PLAY BUTTON
video.addEventListener('ended',videoEnded,false);
function videoEnded(e) {
    setTimeout(function(){
        $('#videoContainer').hide();
        $('#trailer').hide();
        $('a.videoPlay').show();
    }, 1000);
};
</code></pre>