Question

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

Answer 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 值得一看

切换播放/暂停按钮图像

1 个答案: