切换播放/暂停按钮图像答案

【问题标题】：switching play/pause button images切换播放/暂停按钮图像
【发布时间】：2014-04-07 03:42:38
【问题描述】：

我目前有 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()
}

}

<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>

【问题讨论】：

标签： javascript image video

【解决方案1】：

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

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

或也给图片一个id，然后更直接：

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

document.getElementById('ppImage').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

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

添加类的JS行

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

如果沿着 CSS 路线走，sprite 可能值得一看，甚至可能使用 asci 代码更好，例如。

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

Font awesome也值得一看

【讨论】：