jquery - HTML5 Video PlayStop button with Javascript - Stack Overflow

admin管理员组

文章数量:1432401

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

Share Improve this question Follow edited Dec 17, 2013 at 10:26 rowefx asked Dec 17, 2013 at 10:15 rowefxrowefx 26522 gold badges99 silver badges2626 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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

Try to replace:

mediaPlayer.pause == true

With:

mediaPlayer.paused

本文标签： jqueryHTML5 Video PlayStop button with JavascriptStack Overflow