Javascript 切换播放/暂停按钮图像

我现在有HTML，一个视频和一个div来添加播放/暂停按钮，还有javascript来删除控件，并在播放/暂停之间切换。我的javascript函数可以完美地在文本播放和暂停之间切换，但是我不知道如何切换图像。 提前感谢您的帮助，我当前的代码包含在下面

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

}

var video=document.getElementsByTagName（“视频”）[0]；
video.controls=false；
var ppbutton=document.getElementById（“播放暂停”）；

可以使用与设置文本相同的方法：

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

__

---

或者让CSS来做

#playpause { 
     display:block; 
     height:40px; width:150px; /* dimensions of the 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

---

如果使用CSS，一个精灵可能值得一看，或者使用asci代码更好，例如

document.getElementById('playpause').innerHTML='&#9658'; /* asci for 'play' */

---

也值得一看

document.getElementById('ppImage').src='media/stopbutton.png';

#playpause { 
     display:block; 
     height:40px; width:150px; /* dimensions of the 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");
}

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

document.getElementById('playpause').className='pause';

document.getElementById('playpause').innerHTML='&#9658'; /* asci for 'play' */