Кнопка воспроизведения / паузы видеоплеера работает только один раз

Question

В настоящее время я работаю над созданием видеоплеера для своего сайта, но у меня постоянно возникают проблемы, когда дело доходит до конца воспроизведения / паузы. У меня есть одна кнопка, предназначенная для переключения между игрой и паузой, очевидно. Однако, прикрепляя следующий код к этой кнопке, я играю ее, а затем в первый раз делаю паузу. Но когда я возобновляю его, он не работает, и отображаемое видео начинает медленно переходить в черный цвет и перестает воспроизводиться вообще. Я выкопал все, что я мог найти в Интернете, но безуспешно. Я не могу заставить его работать даже в самой простой форме. Вот мой код, который у меня сейчас есть, начиная со стороны html:

    <div id="video-container">
        <video id="selectedVideo" width=1000 poster="">
            <source src="video.mp4" type="video/mp4" />
        </video>
    </div>

    <div class="controls-container">
        <img id="play-button" src="~/Content/Images/Player/play-button.png" />            
    </div>

Вот JavaScript:

var video = $('#selectedVideo').get(0);
var playButton = $('#play-button');

(window).load(function () {
    playButton.on('click', function () {
        playpause();
    });
});

function playpause() {
    if (video.paused || video.ended) {
        video.play();
    } else {
        video.pause();
    }
};

Я действительно надеюсь, что кто-то имеет представление о том, почему это не работает. Я часами пытался понять это, и это сводит меня с ума.