图像更改暂停/播放javascript

Question

使用Javascript：

window.onload = intializePlayer;
function vidplay() {
    var video = document.getElementById("music");
    var button = document.getElementById("play");
    if (video.paused) {
        video.play();
        button.style.background = "url(/resources/play.png)";
    } else {
        video.pause();
        button.style.background = "url(/resources/pause.png)";
    }
}

CSS：

button#play{
    background:url(../resources/pause.png);
    border:none;
    width:40px;
    height:40px;
    cursor:pointer;
}

HTML：

<button id="play" onclick="vidplay()"></button>

当我点击它时，图像似乎不想改变。如何让图片更改为onClick？