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='►'; /* asci 'play' */
font awesome worth too
Comments
Post a Comment