My custom HTML5 video play is almost plete, 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!

My custom HTML5 video play is almost plete, 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!

• javascript
• jquery
• css
• html
• video

• This mediaPlayer.pause == true shouldn't be just mediaPlayer.paused? – emerson.marini Commented Dec 17, 2013 at 10:24
• I need to brush up on my conditionals a little - that worked a treat :) thanks mate. – rowefx Commented Dec 17, 2013 at 10:25
• No problems. I've posted an answer. :) – emerson.marini Commented Dec 17, 2013 at 10:26
• Just seen thank you again :) – rowefx Commented Dec 17, 2013 at 10:31

1 Answer 1

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

Try to replace:

mediaPlayer.pause == true

With:

mediaPlayer.paused