带有Javascript的HTML5视频播放/停止按钮

Question

My custom HTML5 video play is almost complete, I'm just having a slight issue with the Stop button which essentially is a pause button that just resets the video to the beginning.

Below is my code (albeit a little messy);

<script type="text/javascript">
    function stopPlayer() {
        var mediaPlayer;

        mediaPlayer = document.getElementById('media-video');
        mediaPlayer.controls = false;   

        mediaPlayer.pause();
        mediaPlayer.currentTime = 0;

        if ( mediaPlayer.pause == true ) {
            $('.pause-btn').hide();
            $('.play-btn').show();
        }

    }

    function playPlayer() {
        var mediaPlayer;

        mediaPlayer = document.getElementById('media-video');
        mediaPlayer.controls = false;   

        mediaPlayer.play();
    }

    function playPause() {
        var mediaPlayer = document.getElementById('media-video');
        if (mediaPlayer.paused) {
            mediaPlayer.play(); 
            $('.pause-btn').show();
            $('.play-btn').hide();
        } else {
            mediaPlayer.pause(); 
            $('.play-btn').show();
            $('.pause-btn').hide();
        }

    }

</script>

The code in question is inside the stopPlayer(); function -

if ( mediaPlayer.pause == true ) {
            $('.pause-btn').hide();
            $('.play-btn').show();
        }

What I'm trying to do is check to see if the video is "Stopped" with the StopPlayer function and then hide the pause button and show the play button. As these need to be reset when the the video is stopped.

Currently if you press the stop button, the pause button is still there.

Any advice would be great :)

Edit: Fixed @MelanciaUK suggested I removed the == true on the if statement, which fixed my issue. Thanks!

Answer 1

Maybe it's just a little conditional/property mistake.

Try to replace:

mediaPlayer.pause == true

With:

mediaPlayer.paused