Attaching to HTML5 Video Controls Events

I am looking and scouring the internet for a method of attaching and listening to events on a element for when the video controls are clicked. Specifically for play/pause. I need to know when these controls are clicked so that I can make a system I am developing for my UI work intuitively.

Below is my current attempt at attaching to these events. However, it does not work, as in the event handlers are never fired and I never see an alert() or any other result.

    function toggleVideoAndCarousel(video) {
        if (video.paused) {
            video.play();
        }
        else {
            video.pause();
        }
        isSlickPaused = !video.paused;
        if (isSlickPaused)
            $("#videoArea").slickPause();
        else
            $("#videoArea").slickPlay();
    }

    $("#videoArea").on("play", ".videoHero video", function () {
        alert("playing video");
        toggleVideoAndCarousel(this);
    });

    $("#videoArea").on("pause", ".videoHero video", function () {
        alert("pausing video");
        toggleVideoAndCarousel(this);
    });