[SOLVED] I'm trying to get the pause and play button to work interchangeably

[asasass]

Pause was supposed to be in lowercase.

Can someone help me with this. The play button works, but pause isn’t working. You press play it works, but pressing pause has no effect.

Edit fiddle - JSFiddle - Code Playground

<div style="width:266px;" onclick="myObject=document.getElementById('myObj5h'); 
myObject.style.display='block'; this.style.display='none'">

<div style="display:block; cursor: pointer; width: 50px; height:50px; background-color:#00ffff;">

<button style="cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; background-color:#00ffff;color:blue;padding: 0px 0px 0px 0px;"
onclick="document.getElementById('player').play()">Play</button>

</div></div>

<div id="myObj5h" style="display: none;">

<div style="display:block;width: 50px; height:50px; background-color:orange;">

<button style="cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; background-color:orange;color:blue;padding: 0px 0px 0px 0px;"
onclick="document.getElementById('player').Pause()">Pause</button>

<audio id="player" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>
</div></div>

[AllanP]

@asasass

The play button works, but pause isn’t working

The reason is that the player object property is (as your title suggests) in lower case, rather than upper case as you show it in your HTML.

onclick="document.getElementById('player').pause()" is correct.

When you make this change in your JSFiddle example, pause works properly. It does however point out another problem, and that is after you have paused there is no way to start it playing again. The best way is to leave the play button and the pause button always visible so that you can toggle between them. if you want to test this in your example, just change the this.style.display='none' in the code to “block”.

[mainstwebguy1]

another way I’m getting this to work is by assigning the class “video” to the video element and using the following:

//make the video play/pause on click
$('.video').click(function(){this.paused?this.play():this.pause();});