HTML5 video custom controls for any number of videos on the page

HTML

<video width="640" height="480">
    <source src="https://rawgit.com/bower-media-samples/big-buck-bunny-480p-30s/master/video.mp4" type="video/mp4">
</video>
<span class="custom-play-button">Play</span>

<video width="640" height="480">
    <source src="https://rawgit.com/bower-media-samples/big-buck-bunny-480p-30s/master/video.mp4" type="video/mp4">
</video>
<span class="custom-play-button">Play</span>

JavaScript

function closest(el, sel) {
    if (el != null) return el.matches(sel) ? el : (el.querySelector(sel) || closest(el.parentNode, sel));
}

var videos = document.getElementsByTagName("video");
for (i = 0; i < videos.length; i++) {
    var video = videos[i];
    var playButton = closest(video, "span");
    playButton.addEventListener("click", function () {
        document.getElementById('main-video').addEventListener('ended', myHandler, false);
        video.play();
        playButton.style.visibility = "hidden";
        function myHandler(e) {
            playButton.style.visibility = "visible";
        }
    });
}