javascript - switching play/pause button images -

i have html, video , div add play/pause button, , javascript remove control, , toggle between play/pause. javascript function works toggle between text play , pause, cannot figure out how switch image. in advance, current code included below

function playpause() { if (video.paused || video.ended) {     if (video.ended) video.currenttime=0;     ppbutton.title="pause";     ppbutton.innerhtml="pause"     video.play() } else {     ppbutton.title="play";     ppbutton.innerhtml="play"     video.pause() } 

}

<div id="controls">     <div id="playpause" title="play" onclick="playpause()"><img src="media/playbutton.png"></div> </div> <script>     var video = document.getelementsbytagname("video")[0];     video.controls = false;      var ppbutton = document.getelementbyid("playpause"); </script> 

could use same method setting text :

ppbutton.innerhtml='<img src="media/stopbutton.png"/>'; 

or give image id , go more directly :

<img src="media/stopbutton.png" id="ppimage"/> 

__

document.getelementbyid('ppimage').src='media/stopbutton.png'; 

---

or let css it

#playpause {       display:block;       height:40px; width:150px; /* dimensions of image */      background-repeat:no-repeat;      cursor:pointer; }  #playpause.play {      background-image:url("media/stopbutton.png"); }  #playpause.pause {      background-image:url("media/pause.png"); }  #playpause.stop {      background-image:url("media/stop.png"); } 

html

<div id="playpause" title="play" onclick="playpause()"></div> 

js line add class

document.getelementbyid('playpause').classname='pause'; 

---

if going down css route, sprite might worth or better maybe using asci codes , eg.

document.getelementbyid('playpause').innerhtml='&#9658'; /* asci 'play' */ 

---

font awesome worth too