Question

74

HTML5 Javascript Play/Pause button

rated 0 times [ 77] [ 3] / answers: 1 / hits: 20634 / 11 Years ago, mon, december 16, 2013, 12:00:00

I'm attempting to customise the control buttons on my video player. Currently I have a button that plays and pauses my video. This is working great. Though I want a visual representation of the play and pause buttons, instead of them staying the same when in the paused state or when the video is playing. I plan on having two seperate images for play and pause.

My problem is that I can't quite get my javascript to toggle my buttons, I'm thinking the best way to toggle the buttons is when one is paused, hide one element and when the video is playing hide the other element.

So here is what I have currently:

function playPause() { 



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



if (mediaPlayer.paused) 

  mediaPlayer.play(); 

$('.play-btn').hide();

else 

  mediaPlayer.pause(); 

$('.pause-btn').hide();



}

Any help is greatly appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trayvon

Add To Favorites

Follow

Total Points: 35

Total Questions: 117

Total Answers: 88

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

trayvon questions

1 Bootstrap modal UncaughtType Error on modal loading

Sun, Apr 24, 22, 00:00, 2 Years ago

1 Iterate through array of objects using javascript

Wed, Feb 9, 22, 00:00, 2 Years ago

1 Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058

Sun, May 23, 21, 00:00, 3 Years ago

1 Why could window scroll event not being fired

Tue, Jul 14, 20, 00:00, 4 Years ago

1 Error: Connecting to a SFTP server with ssh2-sftp-client in a AWS lambda function throws a time out

Thu, Jun 4, 20, 00:00, 4 Years ago

View All

answered 11 Years ago noel · Accepted Answer

You need to use more Braces '{}' in if and else

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();

    }

}

I think it's works well.